/* ---------------------------------------------------------------
   NEXORA � CONSOLIDATED OVERRIDES (single source of truth)
   This file is loaded AFTER style.css and contains ALL final
   overrides in ONE place. No duplication.
   --------------------------------------------------------------- */

/* -- NAV � Premium Dark Esports Theme -- */
.nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border-bottom: 2px solid #8b1a1a !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .45) !important;
    transition: background .3s, box-shadow .3s, border-color .3s !important;
}

.nav.scrolled {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(26px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
    border-bottom: 2px solid #8b1a1a !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .55) !important;
}

.nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    height: 72px;
}

.brand {
    margin-right: auto !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
}

.brand-mark {
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 55%, #FF1744 100%) !important;
    color: #0B0B0F !important;
    box-shadow: 0 6px 18px rgba(255, 193, 7, .3) !important;
}

.brand-text span span:first-child {
    color: #ffffff !important;
}

.brand-text span span:last-child {
    color: #FFC107 !important;
}

.brand-text span {
    color: #fff !important;
}

.nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    padding-right: clamp(16px, 3vw, 40px) !important;
    z-index: 1100 !important;
}

.nav-links a {
    color: var(--site-nav-text, #FFFFFF) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    letter-spacing: .01em !important;
    transition: color .2s, background .2s !important;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--site-nav-accent, #FF1744) !important;
}

.nav-links a.active {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--site-nav-accent, #FF1744) !important;
    text-shadow: 0 0 12px currentColor !important;
}

.nav-links a.active::after {
    background: var(--site-nav-accent, #FF1744) !important;
    box-shadow: 0 0 10px var(--site-nav-accent, #FF1744) !important;
}

.nav-cta,
.nav-links .nav-cta {
    color: #0B0B0F !important;
    background: linear-gradient(135deg, #FFC107, #FF9800) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    margin-left: 8px !important;
    box-shadow: 0 4px 16px rgba(255, 152, 0, .3) !important;
    transition: transform .18s, box-shadow .18s !important;
}

.nav-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 22px rgba(255, 152, 0, .4) !important;
}

.menu-toggle {
    margin-left: auto !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s !important;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 193, 7, .4) !important;
}

/* Hidden by default on desktop */
.nav-overlay,
.sidebar-close {
    display: none !important;
}


/* -- MOBILE NAV � Right Slide-In Sidebar (=760px) -- */
@media (max-width: 760px) {
    body.menu-open {
        overflow: hidden;
    }

    .nav {
        z-index: 1500 !important;
    }

    .nav-inner {
        position: relative;
    }

    .menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: 14px !important;
        right: 16px !important;
        z-index: 1800 !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        background: rgba(0, 0, 0, .55) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Dark overlay backdrop */
    .nav-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1600 !important;
        background: rgba(0, 0, 0, .6) !important;
        pointer-events: none !important;
    }

    body.menu-open .nav-overlay {
        display: block !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Slide-in sidebar from right */
    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 300px !important;
        max-width: 85vw !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        padding-top: 80px !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
        background:
            linear-gradient(180deg, rgba(8, 9, 12, .96), rgba(8, 9, 12, .99)),
            var(--site-nav-bg, #0c0c10) !important;
        border-left: 1px solid rgba(255, 255, 255, .10) !important;
        border-radius: 0 !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, .7) !important;
        z-index: 1700 !important;
        overflow-y: auto !important;
        transform: translateX(100%) !important;
        visibility: hidden !important;
        transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s ease !important;
    }

    .nav-links.open {
        display: flex !important;
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* Close button inside sidebar */
    .sidebar-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 16px !important;
        right: 14px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, .15) !important;
        background: rgba(255, 255, 255, .08) !important;
        color: #fff !important;
        font-size: 18px !important;
        cursor: pointer !important;
        z-index: 1600 !important;
        transition: background .2s, border-color .2s !important;
    }

    .sidebar-close:hover,
    .sidebar-close:active {
        background: rgba(255, 23, 68, .25) !important;
        border-color: rgba(255, 23, 68, .5) !important;
    }

    .nav-links a {
        font-family: 'Poppins', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 16px 24px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
        color: #f1f5f9 !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        transition: background .2s, color .2s !important;
    }

    .nav-links a:hover,
    .nav-links a:active,
    .nav-links a.active {
        background: rgba(255, 255, 255, .08) !important;
        color: var(--site-nav-accent, #FF1744) !important;
    }

    .nav-links a.active::after {
        display: none !important;
    }

    .nav-links .nav-cta {
        margin: 18px 18px 0 !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        padding: 16px 24px !important;
        justify-content: center !important;
        border-bottom: none !important;
        background: linear-gradient(135deg, #FFC107, #FF9800) !important;
        color: #0B0B0F !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 16px rgba(255, 152, 0, .35) !important;
    }

    .nav-links .nav-cta:hover,
    .nav-links .nav-cta:active,
    .nav-links .nav-cta.active {
        background: linear-gradient(135deg, #FF9800, #FFC107) !important;
        color: #0B0B0F !important;
    }

    .nav-links .nav-cta.active::after {
        display: none !important;
    }
}

.brand-logo {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
    border-radius: 8px;
}

@media (max-width: 760px) {
    .brand-logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
}


/* -- GAME GRID � 3 per row, responsive -- */
#games .game-grid,
body:not(.admin-body) .section.tight .game-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: stretch !important;
}

.game-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.game-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.window-note {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

@media (max-width: 860px) {

    #games .game-grid,
    body:not(.admin-body) .section.tight .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(10px, 1.5vw, 18px) !important;
    }
}

/* -- GAME CARDS � MOBILE COMPACT -- */
@media (max-width: 620px) {
    .game-body {
        padding: 14px 14px 16px !important;
    }

    .game-body h3 {
        font-size: 16px !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .game-title-row {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .platform-pill-new {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }

    .window-note {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    .price-chips {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .price-chips p {
        padding: 8px 10px 7px !important;
    }

    .price-chips strong {
        font-size: 16px !important;
    }

    .price-chips small {
        font-size: 9px !important;
    }

    .card-cta {
        padding: 10px 16px !important;
        font-size: 12px !important;
        min-height: 38px !important;
    }

    .game-image {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 400px) {
    #games .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:not(.admin-body) .section.tight .game-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .game-body {
        padding: 10px !important;
    }

    .game-body h3 {
        font-size: 13px !important;
        -webkit-line-clamp: 1 !important;
    }

    .game-title-row {
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .platform-pill-new {
        font-size: 8px !important;
        padding: 2px 6px !important;
        align-self: flex-start !important;
    }

    .window-note {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }

    .price-chips {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    .price-chips p {
        padding: 6px 8px !important;
    }

    .price-chips p::after {
        display: none !important;
    }

    .price-chips strong {
        font-size: 14px !important;
    }

    .price-chips small {
        font-size: 8.5px !important;
    }

    .card-cta {
        font-size: 10.5px !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    .game-card {
        border-radius: 14px !important;
    }

    .game-image {
        aspect-ratio: 16 / 8 !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .game-body::before,
    .game-body::after {
        display: none !important;
    }
}


/* -- ADMIN LAYOUT � top-level fix (overrides style.css lines 10776 & 11387) -- */
body.admin-body {
    display: block !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
}

body.admin-body .admin-main,
body.admin-body main.admin-main {
    margin-left: 264px !important;
    margin-right: 0 !important;
    padding-left: clamp(22px, 3vw, 42px) !important;
}

/* Sidebar: default hidden, fixed only on desktop */
body.admin-body .admin-side,
body.admin-body aside.admin-side {
    width: 264px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* -- ADMIN SIDEBAR � FIXED position on desktop (=1025px) -- */
@media (min-width: 1025px) {
    body.admin-body {
        display: block !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
    }

    body.admin-body .admin-side,
    body.admin-body aside.admin-side {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 264px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        padding: 18px 12px !important;
        background: linear-gradient(180deg, #111827 0%, #0b1120 100%) !important;
        border-right: 1px solid rgba(250, 204, 21, .16) !important;
        box-shadow: 16px 0 42px rgba(0, 0, 0, .22) !important;
        z-index: 900 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }

    body.admin-body .admin-side-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        padding: 0 8px 16px !important;
        margin-bottom: 12px !important;
        background: #111827 !important;
    }

    body.admin-body .admin-main,
    body.admin-body main.admin-main {
        width: auto !important;
        min-height: 100dvh !important;
        padding: 32px clamp(22px, 3vw, 42px) 54px !important;
        margin-left: 264px !important;
        margin-right: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.admin-body .admin-side-nav a:not(.brand) {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 13.8px !important;
        color: rgba(241, 245, 249, .86) !important;
    }

    body.admin-body .admin-side-nav a.active,
    body.admin-body .admin-side-nav a:not(.brand):hover {
        color: #111827 !important;
        background: linear-gradient(135deg, #facc15, #fb923c) !important;
    }

    .admin-side {
        width: 264px !important;
    }

    .admin-side-nav {
        overflow: visible !important;
    }
}

/* -- ADMIN MOBILE � sidebar hidden, slides in via hamburger (=1024px) -- */
@media (max-width: 1024px) {
    body.admin-body {
        display: block !important;
        padding-left: 0 !important;
    }

    body.admin-body .admin-main,
    body.admin-body main.admin-main {
        margin-left: 0 !important;
        padding: 16px !important;
        padding-top: 70px !important;
    }

    .admin-topbar {
        display: flex !important;
    }

    body.admin-body .admin-side,
    body.admin-body aside.admin-side {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(85vw, 300px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-100%) !important;
        transition: transform .3s ease !important;
        z-index: 1500 !important;
        background: linear-gradient(180deg, #111827 0%, #0b1120 100%) !important;
        border-right: 1px solid rgba(250, 204, 21, .16) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        padding: 18px 12px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.admin-body .admin-side.open,
    body.admin-body aside.admin-side.open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 40px rgba(0, 0, 0, .5) !important;
    }

    .admin-side-nav {
        padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    .admin-drawer-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(148, 163, 184, .28) !important;
        background: rgba(255, 255, 255, .06) !important;
        color: #facc15 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .admin-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, .5) !important;
        z-index: 1400 !important;
    }

    body.admin-drawer-open {
        overflow: hidden !important;
    }
}

.admin-topbar {
    display: none;
}

.admin-side .side-label {
    color: #facc15 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.admin-side-nav a:not(.brand) {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

.admin-side-nav a:not(.brand) i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}







































































































































/* -- SECTION THEME COLORS -- */
.ticker {
    background: linear-gradient(135deg, #b8860b, #d4a420, #f0c040) !important;
    border-block: none !important;
}

.ticker-track span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ticker-track span::before {
    background: #ffffff !important;
}

.countdown-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

#games.section.white {
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 58%, #f8fafc 100%) !important;
    margin-top: 40px !important;
}

/* Leadership section theme � handled by HIERARCHY STAIRCASE block above */

.memories.section.white {
    background: linear-gradient(180deg, #0c0e13 0%, #141820 100%) !important;
}

.memories.section.white .section-heading h2,
.memories.section.white .section-heading p {
    color: var(--ink, #e8e0d4) !important;
}

.highlights-showcase {
    background: linear-gradient(135deg, #0c0e13 0%, #1a0c10 50%, #0c0e13 100%) !important;
}

.highlights-showcase .section-heading h2,
.highlights-showcase .section-heading p {
    color: #fff !important;
}

.features.highlights-showcase .feature-spec-card {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

.features.highlights-showcase .feature-spec-card h3,
.features.highlights-showcase .feature-spec-card p {
    color: #ffffff !important;
}

.phases.section.soft {
    background: linear-gradient(180deg, #10141c 0%, #0c0e13 100%) !important;
}

.phases .phase-item {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(245, 158, 11, .18) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25) !important;
}

.phases .phase-item h4 {
    color: var(--ink, #e8e0d4) !important;
}

.phases .phase-item p {
    color: var(--ink-2, #b8ac9e) !important;
}

.phases .phase-num {
    color: var(--brand, #d4a420) !important;
}


/* -- ABOUT US PAGE -- */
.about-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(69, 10, 10, .9)),
        radial-gradient(circle at 82% 18%, rgba(250, 204, 21, .20), transparent 34%) !important;
}

.about-hero h1,
.about-hero .lead {
    max-width: 820px !important;
}

.about-story-grid,
.about-rules-grid,
.about-contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
}

.about-copy-panel,
.about-feature-list,
.about-rules .feature-list,
.about-contact .feature-list,
.about-contact .form-panel {
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .08) !important;
}

.about-feature-list,
.about-rules .feature-list,
.about-contact .feature-list {
    display: grid !important;
    gap: 10px !important;
    padding: clamp(16px, 2.5vw, 24px) !important;
    background: #ffffff !important;
}

.about-feature-list p,
.about-rules .feature-list p,
.about-contact .feature-list p {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    color: #334155 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
}

.about-feature-list p:last-child,
.about-rules .feature-list p:last-child,
.about-contact .feature-list p:last-child {
    border-bottom: 0 !important;
}

.about-contact .form-panel input,
.about-contact .form-panel textarea {
    font-size: 16px !important;
}

@media (max-width: 860px) {

    .about-story-grid,
    .about-rules-grid,
    .about-contact-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {

    .about-copy-panel,
    .about-feature-list,
    .about-rules .feature-list,
    .about-contact .feature-list,
    .about-contact .form-panel {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .about-feature-list p,
    .about-rules .feature-list p,
    .about-contact .feature-list p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}


/* -- PRIZE POOL BANNER -- */
.prize-banner.reward-showcase {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-block: clamp(28px, 4vw, 52px) !important;
    background: linear-gradient(180deg, #101827 0%, #0a0f1a 100%) !important;
}

.prize-banner.reward-showcase.split-banner {
    min-height: 0 !important;
    padding-block: clamp(32px, 5vw, 56px) !important;
    border-top: none !important;
    background: linear-gradient(180deg, #101827 0%, #0a0f1a 100%) !important;
}

.prize-split-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    gap: clamp(24px, 3vw, 44px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.prize-banner.reward-showcase.split-banner .prize-banner-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    padding: clamp(26px, 3.5vw, 40px) clamp(26px, 3.5vw, 40px) clamp(26px, 3.5vw, 40px) clamp(14px, 1.6vw, 22px) !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, .72) !important;
    border: 1px solid rgba(250, 204, 21, .18) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important;
    text-align: left !important;
    animation: prizeSlideLeft .9s cubic-bezier(.22, 1, .36, 1) both !important;
}

.prize-banner.reward-showcase.split-banner .prize-banner-bg.prize-rotator,
.prize-banner.reward-showcase.split-banner .prize-rotator,
.prize-split-layout .prize-banner-bg.prize-rotator {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 300px) !important;
    justify-self: center !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
    border: 1px solid rgba(250, 204, 21, .14) !important;
    background: #070b12 !important;
    z-index: 1 !important;
    animation: prizeFloat 6s ease-in-out infinite !important;
}

.prize-banner.reward-showcase.split-banner .prize-banner-bg.prize-rotator img,
.prize-split-layout .prize-banner-bg.prize-rotator img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    border-radius: 20px !important;
    animation: prizeImagePop .9s cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes prizeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes prizeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes prizeImagePop {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide,
.prize-split-layout .prize-rotator-slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator.single-slide .prize-rotator-slide,
.prize-split-layout .prize-rotator.single-slide .prize-rotator-slide {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* full-bleed variant (no admin banner uploaded) */
.prize-banner:not(.split-banner) .prize-banner-bg.prize-rotator {
    position: absolute !important;
    inset: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.prize-banner-content {
    min-width: 0;
}

.prize-banner-content .eyebrow {
    font-size: 13px !important;
    letter-spacing: .16em !important;
    margin-bottom: 12px !important;
}

.prize-banner-content h2 {
    font-size: clamp(28px, 3.8vw, 46px) !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
    overflow-wrap: anywhere;
}

.prize-banner-content .prize-amount {
    display: block !important;
    font-size: clamp(30px, 5vw, 58px) !important;
    line-height: 1.05 !important;
    margin: 0 0 16px !important;
    overflow-wrap: anywhere;
    background: linear-gradient(90deg, #facc15, #fb923c, #facc15) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: prizeGlow 4s linear infinite !important;
}

@keyframes prizeGlow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.prize-banner-content .lead {
    font-size: clamp(15px, 1.6vw, 18px) !important;
    line-height: 1.7 !important;
    max-width: 60ch !important;
    margin: 0 !important;
}

.prize-highlights {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 26px !important;
}

.prize-item {
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 20px 16px !important;
    text-align: center !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    .prize-split-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 10px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator {
        min-height: 0 !important;
        order: -1 !important;
        width: min(100%, 360px) !important;
        justify-self: center !important;
        height: auto !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator img {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: block !important;
    }

    .prize-banner.reward-showcase {
        min-height: 0 !important;
        padding-block: 14px !important;
    }

    .prize-banner.reward-showcase.split-banner .prize-banner-content {
        text-align: center !important;
        padding: 14px !important;
    }

    .prize-banner-content h2 {
        font-size: clamp(20px, 5vw, 30px) !important;
    }

    .prize-banner-content .prize-amount {
        font-size: clamp(22px, 6vw, 34px) !important;
    }

    .prize-banner-content .lead {
        font-size: 13px !important;
    }
}

@media (max-width: 620px) {
    .prize-split-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding-inline: 4px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator {
        min-height: 0 !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator img {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: block !important;
    }

    .prize-banner.reward-showcase {
        padding-block: 16px !important;
    }

    .prize-banner.reward-showcase.split-banner .prize-banner-content {
        padding: 12px !important;
    }

    .prize-banner-content .eyebrow {
        font-size: 9px !important;
        margin-bottom: 6px !important;
    }

    .prize-banner-content h2 {
        font-size: clamp(18px, 6vw, 26px) !important;
        margin-bottom: 6px !important;
    }

    .prize-banner-content .prize-amount {
        font-size: clamp(20px, 7vw, 30px) !important;
        margin-bottom: 8px !important;
        color: #facc15 !important;
    }

    .prize-banner-content .lead {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }

    .prize-highlights {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .prize-item {
        padding: 14px 12px !important;
        text-align: left !important;
        justify-items: start !important;
    }

    .prize-item strong {
        font-size: 14px !important;
    }

    .prize-item span {
        font-size: 12px !important;
    }
}

@media (max-width: 420px) {
    .prize-split-layout {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding-inline: 4px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator {
        aspect-ratio: 16/9 !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 12px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator img {
        object-fit: cover !important;
        position: absolute !important;
        inset: 0 !important;
    }

    .prize-banner.reward-showcase.split-banner .prize-banner-content {
        padding: 10px !important;
        background: transparent !important;
        border: none !important;
    }

    .prize-banner-content h2 {
        font-size: clamp(16px, 5.5vw, 22px) !important;
    }

    .prize-banner-content .prize-amount {
        font-size: clamp(18px, 6.5vw, 26px) !important;
    }
}


/* -- REVIEW / TESTIMONIAL CARDS -- */
.review-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.review-card {
    display: grid !important;
    gap: 14px !important;
    padding: 18px !important;
    min-width: 0 !important;
}

.review-card p {
    margin: 0 !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

.review-top {
    min-width: 0 !important;
}

.review-top .avatar {
    flex: 0 0 42px !important;
}

@media (max-width: 620px) {

    .review-grid {
        grid-template-columns: 1fr !important;
    }

    .review-card {
        padding: 14px !important;
    }

    .leadership-section .leader-grid,
    .directors-showcase .leader-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .leadership-section .leader-card,
    .directors-showcase .leader-card {
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }
}


/* -- QR SCANNER MOBILE -- */
@media (max-width: 520px) {
    .qr-overlay {
        align-items: stretch !important;
        padding: 0 !important;
    }

    .qr-overlay-card {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    .qr-overlay-close {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .qr-overlay-head {
        border-radius: 0 !important;
        padding: max(14px, env(safe-area-inset-top)) 56px 12px 14px !important;
    }

    .qr-overlay-badge {
        padding: 4px 9px !important;
        font-size: 9.5px !important;
    }

    .qr-overlay-head h2 {
        margin-top: 6px !important;
        font-size: clamp(17px, 5vw, 22px) !important;
    }

    .qr-overlay-head p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .qr-overlay-body {
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 12px 14px !important;
    }

    .qr-person {
        gap: 10px !important;
        padding-bottom: 9px !important;
        margin-bottom: 9px !important;
    }

    .qr-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
        font-size: 17px !important;
    }

    .qr-person strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .qr-person small {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .qr-line-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .qr-line {
        padding: 6px 7px !important;
        border-radius: 8px !important;
        gap: 0 !important;
    }

    .qr-line span {
        font-size: 8.8px !important;
        letter-spacing: .06em !important;
    }

    .qr-line strong {
        font-size: 11.2px !important;
        line-height: 1.25 !important;
    }

    .qr-proof-link {
        margin-top: 8px !important;
        padding: 7px 10px !important;
        font-size: 11.5px !important;
    }

    .qr-overlay-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 12px 4px !important;
    }

    .qr-btn {
        min-height: 48px !important;
        padding: 10px 8px !important;
        border-radius: 12px !important;
        font-size: 12.5px !important;
    }

    .qr-overlay-note {
        padding: 6px 12px max(10px, env(safe-area-inset-bottom)) !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .qr-invalid-box {
        min-height: 100%;
        align-content: center;
        padding: 12px !important;
    }
}


/* -- VIEW ALL / GALLERY CTA MOBILE -- */
@media (max-width: 700px) {
    .heading-row.games-heading-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: start !important;
        text-align: left !important;
        gap: 12px !important;
    }

    .heading-row.games-heading-row .section-heading {
        text-align: left !important;
        width: 100%;
    }

    .heading-row.games-heading-row .section-heading p,
    .heading-row.games-heading-row .eyebrow {
        text-align: left !important;
        margin-inline: 0 !important;
    }

    .view-all-btn {
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 18px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    .gallery-cta {
        display: flex !important;
        justify-content: flex-start !important;
    }
}

/* -- MOBILE SECTION SPACING -- */
@media (max-width: 620px) {
    .section {
        padding-block: clamp(28px, 6vw, 48px) !important;
    }

    .section.tight {
        padding-block: clamp(20px, 4vw, 36px) !important;
    }

    .section-heading h2 {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.15 !important;
    }

    .section-heading p:not(.eyebrow) {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .section-heading .eyebrow {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    .sponsors-section .section-heading {
        margin-bottom: 10px !important;
    }

    .leader-card {
        border-radius: 14px !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    .leader-photo-wrap {
        padding: 16px 16px 10px !important;
    }

    .leader-body {
        padding: 8px 16px 18px !important;
    }

    .leader-quote {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .leader-name-plate strong {
        font-size: 17px !important;
    }
}


/* -- MANUAL TICKET NUMBER INPUT -- */
.manual-scan {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 15px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, .34);
    background: rgba(148, 163, 184, .07);
}

.manual-scan-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #facc15;
}

.manual-scan label {
    display: grid;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.manual-scan input {
    width: 100%;
    font-size: 16px;
    letter-spacing: .04em;
    padding: 12px 14px;
}

.manual-scan-hint {
    font-size: 11.5px;
    line-height: 1.5;
    opacity: .7;
}

.manual-scan .btn {
    justify-content: center;
}


/* -- TYPOGRAPHY TIDY-UP -- */
.section-heading h2 {
    overflow-wrap: anywhere;
}

.section-heading .eyebrow {
    font-size: 11.5px;
    letter-spacing: .14em;
}

.section-heading p {
    line-height: 1.65;
    max-width: 68ch;
}

.section-heading.center p {
    margin-inline: auto;
}

.countdown-copy h2,
.footer-topline h2 {
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {

    .prize-banner-content h2,
    .countdown-copy h2 {
        font-size: clamp(22px, 6.5vw, 30px) !important;
    }

    .timer-unit strong {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    .eyebrow {
        font-size: 10.5px !important;
    }
}


/* -- MOBILE TAP TARGETS -- */
@media (max-width: 760px) {

    .btn,
    .mini-action,
    .danger-link,
    .icon-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }

    .compact-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .reg-hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: start;
    }

    .reg-hero-poster {
        max-width: min(100%, 390px) !important;
    }

    .reg-hero h1 {
        font-size: clamp(34px, 10vw, 48px) !important;
    }

    .leadership-section .leader-grid,
    .leader-grid {
        grid-template-columns: 1fr !important;
    }

    .phase-timeline {
        grid-template-columns: 1fr !important;
    }
}


/* -- MEMORY SLIDER -- */
.slider-nav {
    display: none !important;
}

.memory-track {
    gap: 18px;
    transform: translateX(0);
}

.memory-track.is-auto-marquee {
    animation: memoryMarquee var(--memory-duration, 28s) linear infinite;
}

.memory-track.is-auto-marquee:hover {
    animation-play-state: running;
}

.memory-track>.memory-card {
    width: 260px;
    flex-basis: 260px;
}

.memory-card {
    padding: 12px 12px 14px;
    border-radius: 18px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(245, 158, 11, .55), rgba(185, 28, 28, .16)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .13);
}

.memory-card .gallery-media {
    aspect-ratio: 16 / 10.5;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
}

.memory-card figcaption {
    padding: 12px 5px 0;
}

.memory-card figcaption strong {
    font-size: 15px;
    color: #111827;
}

.memory-card figcaption span {
    font-size: 12.5px;
    color: #64748b;
}

@media (max-width: 600px) {
    .memory-track>.memory-card {
        width: min(82vw, 300px);
        flex-basis: min(82vw, 300px);
    }
}


/* -- DISCOUNT STYLES -- */
.discount-ribbon,
.discount-admin-pill,
.hero-discount {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    text-shadow: none !important;
}

.price-chips del,
.compact-prices del,
.reg-hero-tags del {
    position: relative;
    display: inline-block !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    color: #9ca3af !important;
    font-weight: 900 !important;
    text-decoration-line: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 3px !important;
}

.price-preview-wrap {
    display: grid;
    gap: 8px;
}

.price-preview-wrap>span {
    color: #8892a4;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.price-preview {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid rgba(232, 56, 79, .15);
    border-radius: 12px;
    background: rgba(232, 56, 79, .04);
    color: #ffffff;
    font-weight: 800;
    font-size: 26px;
}

.price-preview strong {
    color: #4ade80;
    font-size: 26px;
}

.price-preview del {
    color: #555e74;
    text-decoration-line: line-through;
    text-decoration-color: #e8384f;
    text-decoration-thickness: 2px;
}

.payment-detail-list {
    display: grid;
    gap: 6px;
    margin: 12px 0;
}

.payment-detail-list p {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.payment-detail-list span {
    color: #6b7590;
    font-size: 12px;
    font-weight: 700;
}

.payment-detail-list strong {
    min-width: 0;
    color: #d0d6e4;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.payment-qr-box {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

.payment-qr-box img {
    display: block;
    width: min(100%, 200px);
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 520px) {
    .payment-detail-list p {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* -- GALLERY PAGE -- */
.gallery-page-section .gallery-grid {
    align-items: stretch !important;
}

.gallery-page-section .gallery-card {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12) !important;
}

.gallery-page-section .gallery-media {
    width: 100% !important;
    aspect-ratio: 16 / 10.5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
}

.gallery-page-section .gallery-media::after {
    display: none !important;
}

.gallery-page-section .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gallery-page-section .gallery-card figcaption {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    gap: 8px !important;
    min-height: 92px !important;
    padding: 16px 18px 18px !important;
    background: #ffffff !important;
    color: #111827 !important;
    transform: none !important;
    opacity: 1 !important;
    border-top: 1px solid rgba(148, 163, 184, .16) !important;
}

.gallery-page-section .gallery-card figcaption strong {
    display: block !important;
    color: #111827 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
}

.gallery-page-section .gallery-card figcaption span {
    display: block !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.gallery-page-section .gallery-card:hover figcaption {
    transform: none !important;
}

/* -- PRIZE POOL ROTATION ANIMATION & SPECIFIC HIERARCHY -- */
@keyframes prizeFadeRotator {

    0%,
    15% {
        opacity: 1;
        z-index: 2;
    }

    22%,
    95% {
        opacity: 0;
        z-index: 1;
    }

    100% {
        opacity: 1;
        z-index: 2;
    }
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide {
    animation-name: prizeFadeRotator !important;
    animation-duration: var(--prize-duration, 12s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    opacity: 0;
}

/* User requested specific opacity hierarchy */
.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(1) {
    animation-delay: 0s !important;
    filter: brightness(1) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(2) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 1) !important;
    filter: brightness(0.4) saturate(0.8) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(3) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 2) !important;
    filter: brightness(1) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(4) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 3) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(5) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 4) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator.single-slide .prize-rotator-slide {
    animation: none !important;
    opacity: 1 !important;
    filter: brightness(1) !important;
}


/* -- QR SCANNER: MODE SWITCH -- */
.qr-mode-switch {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.qr-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 2px solid rgba(148, 163, 184, .25);
    background: rgba(248, 250, 252, .6);
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.qr-mode-btn i {
    font-size: 20px;
}

.qr-mode-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.qr-mode-btn.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(59, 130, 246, .08));
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.qr-manual-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--line);
}

.qr-manual-panel .manual-scan {
    display: grid;
    gap: 12px;
}

.qr-manual-panel .manual-scan-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.qr-manual-panel .manual-scan-title i {
    color: var(--accent);
}

.qr-manual-panel label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.qr-manual-panel input {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 15px;
    font-family: inherit;
    background: #f8fafc;
}

.qr-manual-panel input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.qr-manual-panel .btn {
    justify-self: start;
}

.manual-scan-hint {
    font-size: 12.5px;
    color: var(--muted);
}

/* -- QR SCANNER: MOBILE -- */
@media (max-width: 760px) {
    .qr-permission-strip {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .qr-mode-switch {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .qr-mode-btn {
        padding: 13px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .qr-mode-btn i {
        font-size: 17px !important;
    }

    .qr-scan-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .qr-camera-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    #qr-reader {
        min-height: 220px !important;
        border-radius: 10px !important;
    }

    #qr-reader video {
        width: 100% !important;
        height: auto !important;
    }

    .qr-scan-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .qr-scan-actions .btn {
        padding: 11px 10px !important;
        font-size: 13px !important;
    }

    .manual-scan {
        gap: 10px !important;
    }

    .qr-result-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .qr-result-details div {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
    }

    .qr-overlay-card {
        width: min(94vw, 420px) !important;
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }

    .qr-overlay-close {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .qr-overlay-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .qr-overlay-actions .qr-btn {
        padding: 13px 14px !important;
        font-size: 14px !important;
    }
}

/* -- QR SCANNER: VERY SMALL -- */
@media (max-width: 400px) {
    .qr-mode-btn {
        padding: 11px 10px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }

    .qr-mode-btn i {
        font-size: 15px !important;
    }

    #qr-reader {
        min-height: 180px !important;
    }
}


/* Compact Footer */
.compact-footer {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg, #0a0c10, #11151d);
}

.compact-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-left .brand {
    margin-bottom: 2px !important;
}

.footer-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-center {
    display: flex;
    gap: 24px;
    align-items: center;
}

.footer-center a {
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s;
}

.footer-center a:hover {
    color: #f0c040;
}

.footer-register-link {
    color: #e8384f !important;
    font-weight: 700 !important;
}

.compact-footer .footer-social-mini {
    gap: 12px;
}

.compact-footer .footer-social-mini a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.compact-footer .footer-social-mini a:hover {
    background: #e8384f;
    color: #fff;
}

@media (max-width: 768px) {
    .compact-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .footer-left {
        align-items: center;
    }

    .footer-center {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
}

/* -------------------------------------------
   HERO ? SAME FORMAT ON MOBILE
   ------------------------------------------- */
@media (max-width: 620px) {
    .hero {
        min-height: 480px !important;
        padding: 36px 0 48px !important;
    }

    .hero-slide {
        background-position: center 30% !important;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(8, 10, 14, .50) 0%, rgba(8, 10, 14, .72) 50%, rgba(8, 10, 14, .88) 100%) !important;
    }

    .hero-content {
        max-width: min(100%, 520px) !important;
        padding: 0 20px !important;
    }

    .hero-content h1 {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.08 !important;
    }

    .hero-quote {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 28px !important;
    }

    .hero-acts {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .hero-acts .btn {
        width: auto !important;
        min-height: 36px !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

/* -------------------------------------------




















































































































































































    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
}

.status-pill.closed {
    background: rgba(69, 10, 10, 0.92) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

.status-pill.open i {
    color: #ffffff !important;
}

.status-pill.closed i {
    color: #ef4444 !important;
}

/* -- PRIZE ITEMS FADE OVERLAY -- */
.prize-banner-bg.prize-rotator {
    position: relative !important;
}

.prize-split-layout .prize-banner-bg.prize-rotator .prize-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
    display: none !important;
}

.prize-split-layout .prize-banner-bg.prize-rotator .prize-slide.active {
    opacity: 1;
    z-index: 2;
    display: block !important;
}

.prize-banner-bg.prize-rotator .prize-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.prize-banner-bg.prize-rotator .prize-slide.active {
    opacity: 1;
    z-index: 2;
}

.prize-banner-bg.prize-rotator .prize-slide:first-child:last-child {
    position: relative !important;
    opacity: 1;
}

.prize-dots {
    position: absolute;
    bottom: 12px;
    right: 16px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.prize-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .3s, transform .3s;
}

.prize-dot.active {
    background: #facc15;
    transform: scale(1.3);
}

/* -- COUNTDOWN FULL WIDTH -- no gaps, merged with ticker & prize -- */
.countdown-section {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.countdown-section .countdown-panel {
    margin: 0 auto !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(24px, 4vw, 56px) !important;
    padding-right: clamp(24px, 4vw, 56px) !important;
    padding-top: clamp(14px, 2vw, 22px) !important;
    padding-bottom: clamp(14px, 2vw, 22px) !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Remove all gaps between ticker ? countdown ? prize pool */
.ticker+.countdown-section,
.countdown-section+.prize-banner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ticker {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

@media (max-width: 620px) {
    .countdown-section .countdown-panel {
        padding-left: clamp(16px, 4vw, 24px) !important;
        padding-right: clamp(16px, 4vw, 24px) !important;
    }
}

/* -- MOBILE COUNTDOWN -- 2x2 grid layout -- */
@media (max-width: 620px) {
    .countdown-section .countdown-panel {
        padding: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px) !important;
        border-radius: 0 !important;
    }

    .countdown-section .countdown-inner,
    .countdown-inner {
        grid-template-columns: 1fr !important;
        gap: clamp(14px, 3vw, 20px) !important;
        align-items: stretch !important;
    }

    .countdown-copy h2 {
        font-size: clamp(22px, 6.5vw, 30px) !important;
        margin: 6px 0 10px !important;
    }

    .countdown-copy .eyeb.on-dark {
        font-size: 10px !important;
        padding: 4px 10px 4px 8px !important;
        margin-bottom: 10px !important;
    }

    .countdown-copy .countdown-date {
        font-size: 12px !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .countdown-meta {
        gap: 6px !important;
    }

    .countdown-meta span {
        font-size: 10px !important;
        padding: 4px 9px !important;
    }

    .countdown-side {
        justify-items: stretch !important;
    }

    .timer {
        grid-template-columns: 1fr 1fr !important;
        gap: clamp(8px, 2vw, 12px) !important;
    }

    .countdown-separator {
        display: none !important;
    }

    .timer-unit {
        min-height: 64px !important;
        padding: clamp(10px, 2.5vw, 14px) 8px clamp(8px, 2vw, 12px) !important;
        border-radius: clamp(8px, 1.4vw, 12px) !important;
    }

    .timer-unit strong {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    .timer-unit span {
        font-size: 9px !important;
        margin-top: 4px !important;
    }
}

/* -- TABLET COUNTDOWN ? side by side -- */
@media (max-width: 900px) {
    .countdown-section .countdown-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important;
        gap: clamp(16px, 3vw, 24px) !important;
    }
}

/* -- LEADERSHIP SECTION � OVERRIDES CLEANED -- */
/* New leadership styles are defined in the template's inline <style> block.
   This section only provides fallback/base values for the new markup. */

section.leadership-section {
    position: relative !important;
    border-block: none !important;
    isolation: isolate !important;
}

section.leadership-section .leader-role-badge {
    display: inline-block !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
}

/* TABLET */
@media (max-width: 900px) {
    section.leadership-section .leader-grid {
        gap: 24px !important;
    }
}

.price-chips p {
    padding: 8px 10px 7px !important;
}

.price-chips strong {
    font-size: 16px !important;
}

.price-chips small {
    font-size: 9px !important;
}

.card-cta {
    padding: 10px 16px !important;
    font-size: 12px !important;
    min-height: 38px !important;
}

.game-image {
    aspect-ratio: 16 / 9 !important;
}
}

@media (max-width: 400px) {
    #games .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:not(.admin-body) .section.tight .game-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .game-body {
        padding: 10px !important;
    }

    .game-body h3 {
        font-size: 13px !important;
        -webkit-line-clamp: 1 !important;
    }

    .game-title-row {
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .platform-pill-new {
        font-size: 8px !important;
        padding: 2px 6px !important;
        align-self: flex-start !important;
    }

    .window-note {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }

    .price-chips {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    .price-chips p {
        padding: 6px 8px !important;
    }

    .price-chips p::after {
        display: none !important;
    }

    .price-chips strong {
        font-size: 14px !important;
    }

    .price-chips small {
        font-size: 8.5px !important;
    }

    .card-cta {
        font-size: 10.5px !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    .game-card {
        border-radius: 14px !important;
    }

    .game-image {
        aspect-ratio: 16 / 8 !important;
    }

    .game-body::before,
    .game-body::after {
        display: none !important;
    }
}


/* -- ADMIN LAYOUT � top-level fix (overrides style.css lines 10776 & 11387) -- */
body.admin-body {
    display: block !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
}

body.admin-body .admin-main,
body.admin-body main.admin-main {
    margin-left: 264px !important;
    margin-right: 0 !important;
    padding-left: clamp(22px, 3vw, 42px) !important;
}

/* Sidebar: default hidden, fixed only on desktop */
body.admin-body .admin-side,
body.admin-body aside.admin-side {
    width: 264px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* -- ADMIN SIDEBAR � FIXED position on desktop (=1025px) -- */
@media (min-width: 1025px) {
    body.admin-body {
        display: block !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
    }

    body.admin-body .admin-side,
    body.admin-body aside.admin-side {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 264px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        padding: 18px 12px !important;
        background: linear-gradient(180deg, #111827 0%, #0b1120 100%) !important;
        border-right: 1px solid rgba(250, 204, 21, .16) !important;
        box-shadow: 16px 0 42px rgba(0, 0, 0, .22) !important;
        z-index: 900 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }

    body.admin-body .admin-side-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        padding: 0 8px 16px !important;
        margin-bottom: 12px !important;
        background: #111827 !important;
    }

    body.admin-body .admin-main,
    body.admin-body main.admin-main {
        width: auto !important;
        min-height: 100dvh !important;
        padding: 32px clamp(22px, 3vw, 42px) 54px !important;
        margin-left: 264px !important;
        margin-right: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.admin-body .admin-side-nav a:not(.brand) {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 13.8px !important;
        color: rgba(241, 245, 249, .86) !important;
    }

    body.admin-body .admin-side-nav a.active,
    body.admin-body .admin-side-nav a:not(.brand):hover {
        color: #111827 !important;
        background: linear-gradient(135deg, #facc15, #fb923c) !important;
    }

    .admin-side {
        width: 264px !important;
    }

    .admin-side-nav {
        overflow: visible !important;
    }
}

/* -- ADMIN MOBILE � sidebar hidden, slides in via hamburger (=1024px) -- */
@media (max-width: 1024px) {
    body.admin-body {
        display: block !important;
        padding-left: 0 !important;
    }

    body.admin-body .admin-main,
    body.admin-body main.admin-main {
        margin-left: 0 !important;
        padding: 16px !important;
        padding-top: 70px !important;
    }

    .admin-topbar {
        display: flex !important;
    }

    body.admin-body .admin-side,
    body.admin-body aside.admin-side {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(85vw, 300px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-100%) !important;
        transition: transform .3s ease !important;
        z-index: 1500 !important;
        background: linear-gradient(180deg, #111827 0%, #0b1120 100%) !important;
        border-right: 1px solid rgba(250, 204, 21, .16) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        padding: 18px 12px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.admin-body .admin-side.open,
    body.admin-body aside.admin-side.open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 40px rgba(0, 0, 0, .5) !important;
    }

    .admin-side-nav {
        padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    .admin-drawer-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(148, 163, 184, .28) !important;
        background: rgba(255, 255, 255, .06) !important;
        color: #facc15 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .admin-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, .5) !important;
        z-index: 1400 !important;
    }

    body.admin-drawer-open {
        overflow: hidden !important;
    }
}

.admin-topbar {
    display: none;
}

.admin-side .side-label {
    color: #facc15 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.admin-side-nav a:not(.brand) {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

.admin-side-nav a:not(.brand) i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}







































































































































/* -- SECTION THEME COLORS -- */
.ticker {
    background: linear-gradient(135deg, #b8860b, #d4a420, #f0c040) !important;
    border-block: none !important;
}

.ticker-track span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ticker-track span::before {
    background: #ffffff !important;
}

.countdown-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

#games.section.white {
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 58%, #f8fafc 100%) !important;
    margin-top: 40px !important;
}

/* Leadership section theme � handled by HIERARCHY STAIRCASE block above */

.memories.section.white {
    background: linear-gradient(180deg, #0c0e13 0%, #141820 100%) !important;
}

.memories.section.white .section-heading h2,
.memories.section.white .section-heading p {
    color: var(--ink, #e8e0d4) !important;
}

.highlights-showcase {
    background: linear-gradient(135deg, #0c0e13 0%, #1a0c10 50%, #0c0e13 100%) !important;
}

.highlights-showcase .section-heading h2,
.highlights-showcase .section-heading p {
    color: #fff !important;
}

.features.highlights-showcase .feature-spec-card {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

.features.highlights-showcase .feature-spec-card h3,
.features.highlights-showcase .feature-spec-card p {
    color: #ffffff !important;
}

.phases.section.soft {
    background: linear-gradient(180deg, #10141c 0%, #0c0e13 100%) !important;
}

.phases .phase-item {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(245, 158, 11, .18) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25) !important;
}

.phases .phase-item h4 {
    color: var(--ink, #e8e0d4) !important;
}

.phases .phase-item p {
    color: var(--ink-2, #b8ac9e) !important;
}

.phases .phase-num {
    color: var(--brand, #d4a420) !important;
}


/* -- ABOUT US PAGE -- */
.about-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(69, 10, 10, .9)),
        radial-gradient(circle at 82% 18%, rgba(250, 204, 21, .20), transparent 34%) !important;
}

.about-hero h1,
.about-hero .lead {
    max-width: 820px !important;
}

.about-story-grid,
.about-rules-grid,
.about-contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
}

.about-copy-panel,
.about-feature-list,
.about-rules .feature-list,
.about-contact .feature-list,
.about-contact .form-panel {
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .08) !important;
}

.about-feature-list,
.about-rules .feature-list,
.about-contact .feature-list {
    display: grid !important;
    gap: 10px !important;
    padding: clamp(16px, 2.5vw, 24px) !important;
    background: #ffffff !important;
}

.about-feature-list p,
.about-rules .feature-list p,
.about-contact .feature-list p {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    color: #334155 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
}

.about-feature-list p:last-child,
.about-rules .feature-list p:last-child,
.about-contact .feature-list p:last-child {
    border-bottom: 0 !important;
}

.about-contact .form-panel input,
.about-contact .form-panel textarea {
    font-size: 16px !important;
}

@media (max-width: 860px) {

    .about-story-grid,
    .about-rules-grid,
    .about-contact-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {

    .about-copy-panel,
    .about-feature-list,
    .about-rules .feature-list,
    .about-contact .feature-list,
    .about-contact .form-panel {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .about-feature-list p,
    .about-rules .feature-list p,
    .about-contact .feature-list p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}


/* -- PRIZE POOL BANNER -- */
.prize-banner.reward-showcase {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-block: clamp(28px, 4vw, 52px) !important;
    background: linear-gradient(180deg, #101827 0%, #0a0f1a 100%) !important;
}

.prize-banner.reward-showcase.split-banner {
    min-height: 0 !important;
    padding-block: clamp(32px, 5vw, 56px) !important;
    border-top: none !important;
    background: linear-gradient(180deg, #101827 0%, #0a0f1a 100%) !important;
}

.prize-split-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    gap: clamp(24px, 3vw, 44px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.prize-banner.reward-showcase.split-banner .prize-banner-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    padding: clamp(26px, 3.5vw, 40px) clamp(26px, 3.5vw, 40px) clamp(26px, 3.5vw, 40px) clamp(14px, 1.6vw, 22px) !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, .72) !important;
    border: 1px solid rgba(250, 204, 21, .18) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important;
    text-align: left !important;
    animation: prizeSlideLeft .9s cubic-bezier(.22, 1, .36, 1) both !important;
}

.prize-banner.reward-showcase.split-banner .prize-banner-bg.prize-rotator,
.prize-banner.reward-showcase.split-banner .prize-rotator,
.prize-split-layout .prize-banner-bg.prize-rotator {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 300px) !important;
    justify-self: center !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
    border: 1px solid rgba(250, 204, 21, .14) !important;
    background: #070b12 !important;
    z-index: 1 !important;
    animation: prizeFloat 6s ease-in-out infinite !important;
}

.prize-banner.reward-showcase.split-banner .prize-banner-bg.prize-rotator img,
.prize-split-layout .prize-banner-bg.prize-rotator img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    border-radius: 20px !important;
    animation: prizeImagePop .9s cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes prizeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes prizeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes prizeImagePop {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide,
.prize-split-layout .prize-rotator-slide {
    position: absolute !important;
    inset: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator.single-slide .prize-rotator-slide,
.prize-split-layout .prize-rotator.single-slide .prize-rotator-slide {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* full-bleed variant (no admin banner uploaded) */
.prize-banner:not(.split-banner) .prize-banner-bg.prize-rotator {
    position: absolute !important;
    inset: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.prize-banner-content {
    min-width: 0;
}

.prize-banner-content .eyebrow {
    font-size: 13px !important;
    letter-spacing: .16em !important;
    margin-bottom: 12px !important;
}

.prize-banner-content h2 {
    font-size: clamp(28px, 3.8vw, 46px) !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
    overflow-wrap: anywhere;
}

.prize-banner-content .prize-amount {
    display: block !important;
    font-size: clamp(30px, 5vw, 58px) !important;
    line-height: 1.05 !important;
    margin: 0 0 16px !important;
    overflow-wrap: anywhere;
    background: linear-gradient(90deg, #facc15, #fb923c, #facc15) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: prizeGlow 4s linear infinite !important;
}

@keyframes prizeGlow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.prize-banner-content .lead {
    font-size: clamp(15px, 1.6vw, 18px) !important;
    line-height: 1.7 !important;
    max-width: 60ch !important;
    margin: 0 !important;
}

.prize-highlights {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 26px !important;
}

.prize-item {
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 20px 16px !important;
    text-align: center !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    .prize-split-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 10px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator {
        min-height: 0 !important;
        order: -1 !important;
        width: min(100%, 360px) !important;
        justify-self: center !important;
        height: auto !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator img {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: block !important;
    }

    .prize-banner.reward-showcase {
        min-height: 0 !important;
        padding-block: 14px !important;
    }

    .prize-banner.reward-showcase.split-banner .prize-banner-content {
        text-align: center !important;
        padding: 14px !important;
    }

    .prize-banner-content h2 {
        font-size: clamp(20px, 5vw, 30px) !important;
    }

    .prize-banner-content .prize-amount {
        font-size: clamp(22px, 6vw, 34px) !important;
    }

    .prize-banner-content .lead {
        font-size: 13px !important;
    }
}

@media (max-width: 620px) {
    .prize-split-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding-inline: 4px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator {
        min-height: 0 !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator img {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        display: block !important;
    }

    .prize-banner.reward-showcase {
        padding-block: 16px !important;
    }

    .prize-banner.reward-showcase.split-banner .prize-banner-content {
        padding: 12px !important;
    }

    .prize-banner-content .eyebrow {
        font-size: 9px !important;
        margin-bottom: 6px !important;
    }

    .prize-banner-content h2 {
        font-size: clamp(18px, 6vw, 26px) !important;
        margin-bottom: 6px !important;
    }

    .prize-banner-content .prize-amount {
        font-size: clamp(20px, 7vw, 30px) !important;
        margin-bottom: 8px !important;
        color: #facc15 !important;
    }

    .prize-banner-content .lead {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }

    .prize-highlights {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .prize-item {
        padding: 14px 12px !important;
        text-align: left !important;
        justify-items: start !important;
    }

    .prize-item strong {
        font-size: 14px !important;
    }

    .prize-item span {
        font-size: 12px !important;
    }
}

@media (max-width: 420px) {
    .prize-split-layout {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding-inline: 4px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator {
        aspect-ratio: 16/9 !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 12px !important;
    }

    .prize-split-layout .prize-banner-bg.prize-rotator img {
        object-fit: cover !important;
        position: absolute !important;
        inset: 0 !important;
    }

    .prize-banner.reward-showcase.split-banner .prize-banner-content {
        padding: 10px !important;
        background: transparent !important;
        border: none !important;
    }

    .prize-banner-content h2 {
        font-size: clamp(16px, 5.5vw, 22px) !important;
    }

    .prize-banner-content .prize-amount {
        font-size: clamp(18px, 6.5vw, 26px) !important;
    }
}


/* -- REVIEW / TESTIMONIAL CARDS -- */
.review-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.review-card {
    display: grid !important;
    gap: 14px !important;
    padding: 18px !important;
    min-width: 0 !important;
}

.review-card p {
    margin: 0 !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

.review-top {
    min-width: 0 !important;
}

.review-top .avatar {
    flex: 0 0 42px !important;
}

@media (max-width: 620px) {

    .review-grid {
        grid-template-columns: 1fr !important;
    }

    .review-card {
        padding: 14px !important;
    }

    .leadership-section .leader-grid,
    .directors-showcase .leader-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .leadership-section .leader-card,
    .directors-showcase .leader-card {
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }
}


/* -- QR SCANNER MOBILE -- */
@media (max-width: 520px) {
    .qr-overlay {
        align-items: stretch !important;
        padding: 0 !important;
    }

    .qr-overlay-card {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    .qr-overlay-close {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .qr-overlay-head {
        border-radius: 0 !important;
        padding: max(14px, env(safe-area-inset-top)) 56px 12px 14px !important;
    }

    .qr-overlay-badge {
        padding: 4px 9px !important;
        font-size: 9.5px !important;
    }

    .qr-overlay-head h2 {
        margin-top: 6px !important;
        font-size: clamp(17px, 5vw, 22px) !important;
    }

    .qr-overlay-head p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .qr-overlay-body {
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 12px 14px !important;
    }

    .qr-person {
        gap: 10px !important;
        padding-bottom: 9px !important;
        margin-bottom: 9px !important;
    }

    .qr-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
        font-size: 17px !important;
    }

    .qr-person strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .qr-person small {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .qr-line-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .qr-line {
        padding: 6px 7px !important;
        border-radius: 8px !important;
        gap: 0 !important;
    }

    .qr-line span {
        font-size: 8.8px !important;
        letter-spacing: .06em !important;
    }

    .qr-line strong {
        font-size: 11.2px !important;
        line-height: 1.25 !important;
    }

    .qr-proof-link {
        margin-top: 8px !important;
        padding: 7px 10px !important;
        font-size: 11.5px !important;
    }

    .qr-overlay-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 12px 4px !important;
    }

    .qr-btn {
        min-height: 48px !important;
        padding: 10px 8px !important;
        border-radius: 12px !important;
        font-size: 12.5px !important;
    }

    .qr-overlay-note {
        padding: 6px 12px max(10px, env(safe-area-inset-bottom)) !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .qr-invalid-box {
        min-height: 100%;
        align-content: center;
        padding: 12px !important;
    }
}


/* -- VIEW ALL / GALLERY CTA MOBILE -- */
@media (max-width: 700px) {
    .heading-row.games-heading-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: start !important;
        text-align: left !important;
        gap: 12px !important;
    }

    .heading-row.games-heading-row .section-heading {
        text-align: left !important;
        width: 100%;
    }

    .heading-row.games-heading-row .section-heading p,
    .heading-row.games-heading-row .eyebrow {
        text-align: left !important;
        margin-inline: 0 !important;
    }

    .view-all-btn {
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 18px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    .gallery-cta {
        display: flex !important;
        justify-content: flex-start !important;
    }
}

/* -- MOBILE SECTION SPACING -- */
@media (max-width: 620px) {
    .section {
        padding-block: clamp(28px, 6vw, 48px) !important;
    }

    .section.tight {
        padding-block: clamp(20px, 4vw, 36px) !important;
    }

    .section-heading h2 {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.15 !important;
    }

    .section-heading p:not(.eyebrow) {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .section-heading .eyebrow {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    .sponsors-section .section-heading {
        margin-bottom: 10px !important;
    }

    .leader-card {
        border-radius: 14px !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    .leader-photo-wrap {
        padding: 16px 16px 10px !important;
    }

    .leader-body {
        padding: 8px 16px 18px !important;
    }

    .leader-quote {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .leader-name-plate strong {
        font-size: 17px !important;
    }
}


/* -- MANUAL TICKET NUMBER INPUT -- */
.manual-scan {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 15px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, .34);
    background: rgba(148, 163, 184, .07);
}

.manual-scan-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #facc15;
}

.manual-scan label {
    display: grid;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.manual-scan input {
    width: 100%;
    font-size: 16px;
    letter-spacing: .04em;
    padding: 12px 14px;
}

.manual-scan-hint {
    font-size: 11.5px;
    line-height: 1.5;
    opacity: .7;
}

.manual-scan .btn {
    justify-content: center;
}


/* -- TYPOGRAPHY TIDY-UP -- */
.section-heading h2 {
    overflow-wrap: anywhere;
}

.section-heading .eyebrow {
    font-size: 11.5px;
    letter-spacing: .14em;
}

.section-heading p {
    line-height: 1.65;
    max-width: 68ch;
}

.section-heading.center p {
    margin-inline: auto;
}

.countdown-copy h2,
.footer-topline h2 {
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {

    .prize-banner-content h2,
    .countdown-copy h2 {
        font-size: clamp(22px, 6.5vw, 30px) !important;
    }

    .timer-unit strong {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    .eyebrow {
        font-size: 10.5px !important;
    }
}


/* -- MOBILE TAP TARGETS -- */
@media (max-width: 760px) {

    .btn,
    .mini-action,
    .danger-link,
    .icon-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }

    .compact-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .reg-hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: start;
    }

    .reg-hero-poster {
        max-width: min(100%, 390px) !important;
    }

    .reg-hero h1 {
        font-size: clamp(34px, 10vw, 48px) !important;
    }

    .leadership-section .leader-grid,
    .leader-grid {
        grid-template-columns: 1fr !important;
    }

    .phase-timeline {
        grid-template-columns: 1fr !important;
    }
}


/* -- MEMORY SLIDER -- */
.slider-nav {
    display: none !important;
}

.memory-track {
    gap: 18px;
    transform: translateX(0);
}

.memory-track.is-auto-marquee {
    animation: memoryMarquee var(--memory-duration, 28s) linear infinite;
}

.memory-track.is-auto-marquee:hover {
    animation-play-state: running;
}

.memory-track>.memory-card {
    width: 260px;
    flex-basis: 260px;
}

.memory-card {
    padding: 12px 12px 14px;
    border-radius: 18px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(245, 158, 11, .55), rgba(185, 28, 28, .16)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .13);
}

.memory-card .gallery-media {
    aspect-ratio: 16 / 10.5;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
}

.memory-card figcaption {
    padding: 12px 5px 0;
}

.memory-card figcaption strong {
    font-size: 15px;
    color: #111827;
}

.memory-card figcaption span {
    font-size: 12.5px;
    color: #64748b;
}

@media (max-width: 600px) {
    .memory-track>.memory-card {
        width: min(82vw, 300px);
        flex-basis: min(82vw, 300px);
    }
}


/* -- DISCOUNT STYLES -- */
.discount-ribbon,
.discount-admin-pill,
.hero-discount {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    text-shadow: none !important;
}

.price-chips del,
.compact-prices del,
.reg-hero-tags del {
    position: relative;
    display: inline-block !important;
    margin-right: 8px !important;
    color: #9ca3af !important;
    font-weight: 900 !important;
    text-decoration-line: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 3px !important;
}


/* -- GALLERY PAGE -- */
.gallery-page-section .gallery-grid {
    align-items: stretch !important;
}

.gallery-page-section .gallery-card {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12) !important;
}

.gallery-page-section .gallery-media {
    width: 100% !important;
    aspect-ratio: 16 / 10.5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
}

.gallery-page-section .gallery-media::after {
    display: none !important;
}

.gallery-page-section .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gallery-page-section .gallery-card figcaption {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    gap: 8px !important;
    min-height: 92px !important;
    padding: 16px 18px 18px !important;
    background: #ffffff !important;
    color: #111827 !important;
    transform: none !important;
    opacity: 1 !important;
    border-top: 1px solid rgba(148, 163, 184, .16) !important;
}

.gallery-page-section .gallery-card figcaption strong {
    display: block !important;
    color: #111827 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
}

.gallery-page-section .gallery-card figcaption span {
    display: block !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.gallery-page-section .gallery-card:hover figcaption {
    transform: none !important;
}

/* -- PRIZE POOL ROTATION ANIMATION & SPECIFIC HIERARCHY -- */
@keyframes prizeFadeRotator {

    0%,
    15% {
        opacity: 1;
        z-index: 2;
    }

    22%,
    95% {
        opacity: 0;
        z-index: 1;
    }

    100% {
        opacity: 1;
        z-index: 2;
    }
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide {
    animation-name: prizeFadeRotator !important;
    animation-duration: var(--prize-duration, 12s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    opacity: 0;
}

/* User requested specific opacity hierarchy */
.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(1) {
    animation-delay: 0s !important;
    filter: brightness(1) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(2) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 1) !important;
    filter: brightness(0.4) saturate(0.8) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(3) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 2) !important;
    filter: brightness(1) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(4) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 3) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator-slide:nth-child(5) {
    animation-delay: calc(var(--prize-duration, 12s) / var(--prize-slide-count, 1) * 4) !important;
}

.prize-banner.reward-showcase.split-banner .prize-rotator.single-slide .prize-rotator-slide {
    animation: none !important;
    opacity: 1 !important;
    filter: brightness(1) !important;
}


/* -- QR SCANNER: MODE SWITCH -- */
.qr-mode-switch {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.qr-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 2px solid rgba(148, 163, 184, .25);
    background: rgba(248, 250, 252, .6);
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.qr-mode-btn i {
    font-size: 20px;
}

.qr-mode-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.qr-mode-btn.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(59, 130, 246, .08));
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.qr-manual-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--line);
}

.qr-manual-panel .manual-scan {
    display: grid;
    gap: 12px;
}

.qr-manual-panel .manual-scan-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.qr-manual-panel .manual-scan-title i {
    color: var(--accent);
}

.qr-manual-panel label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.qr-manual-panel input {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 15px;
    font-family: inherit;
    background: #f8fafc;
}

.qr-manual-panel input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.qr-manual-panel .btn {
    justify-self: start;
}

.manual-scan-hint {
    font-size: 12.5px;
    color: var(--muted);
}

/* -- QR SCANNER: MOBILE -- */
@media (max-width: 760px) {
    .qr-permission-strip {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .qr-mode-switch {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .qr-mode-btn {
        padding: 13px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .qr-mode-btn i {
        font-size: 17px !important;
    }

    .qr-scan-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .qr-camera-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    #qr-reader {
        min-height: 220px !important;
        border-radius: 10px !important;
    }

    #qr-reader video {
        width: 100% !important;
        height: auto !important;
    }

    .qr-scan-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .qr-scan-actions .btn {
        padding: 11px 10px !important;
        font-size: 13px !important;
    }

    .manual-scan {
        gap: 10px !important;
    }

    .qr-result-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .qr-result-details div {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
    }

    .qr-overlay-card {
        width: min(94vw, 420px) !important;
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }

    .qr-overlay-close {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .qr-overlay-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .qr-overlay-actions .qr-btn {
        padding: 13px 14px !important;
        font-size: 14px !important;
    }
}

/* -- QR SCANNER: VERY SMALL -- */
@media (max-width: 400px) {
    .qr-mode-btn {
        padding: 11px 10px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }

    .qr-mode-btn i {
        font-size: 15px !important;
    }

    #qr-reader {
        min-height: 180px !important;
    }
}


/* Compact Footer */
.compact-footer {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg, #0a0c10, #11151d);
}

.compact-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-left .brand {
    margin-bottom: 2px !important;
}

.footer-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-center {
    display: flex;
    gap: 24px;
    align-items: center;
}

.footer-center a {
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s;
}

.footer-center a:hover {
    color: #f0c040;
}

.footer-register-link {
    color: #e8384f !important;
    font-weight: 700 !important;
}

.compact-footer .footer-social-mini {
    gap: 12px;
}

.compact-footer .footer-social-mini a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.compact-footer .footer-social-mini a:hover {
    background: #e8384f;
    color: #fff;
}

@media (max-width: 768px) {
    .compact-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .footer-left {
        align-items: center;
    }

    .footer-center {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
}

/* -------------------------------------------
   HERO ? SAME FORMAT ON MOBILE
   ------------------------------------------- */
@media (max-width: 620px) {
    .hero {
        min-height: 480px !important;
        padding: 36px 0 48px !important;
    }

    .hero-slide {
        background-position: center 30% !important;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(8, 10, 14, .50) 0%, rgba(8, 10, 14, .72) 50%, rgba(8, 10, 14, .88) 100%) !important;
    }

    .hero-content {
        max-width: min(100%, 520px) !important;
        padding: 0 20px !important;
    }

    .hero-content h1 {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.08 !important;
    }

    .hero-quote {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 28px !important;
    }

    .hero-acts {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .hero-acts .btn {
        width: auto !important;
        min-height: 36px !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}


















































































































































































/* -- STATUS PILLS ? OPEN dark green, CLOSED dark red -- */
.status-pill.open {
    background: #16a34a !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
}

.status-pill.closed {
    background: rgba(69, 10, 10, 0.92) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

.status-pill.open i {
    color: #ffffff !important;
}

.status-pill.closed i {
    color: #ef4444 !important;
}

/* -- PRIZE ITEMS FADE OVERLAY -- */
.prize-banner-bg.prize-rotator {
    position: relative !important;
}

.prize-split-layout .prize-banner-bg.prize-rotator .prize-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
    display: none !important;
}

.prize-split-layout .prize-banner-bg.prize-rotator .prize-slide.active {
    opacity: 1;
    z-index: 2;
    display: block !important;
}

.prize-banner-bg.prize-rotator .prize-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.prize-banner-bg.prize-rotator .prize-slide.active {
    opacity: 1;
    z-index: 2;
}

.prize-banner-bg.prize-rotator .prize-slide:first-child:last-child {
    position: relative !important;
    opacity: 1;
}

.prize-dots {
    position: absolute;
    bottom: 12px;
    right: 16px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.prize-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .3s, transform .3s;
}

.prize-dot.active {
    background: #facc15;
    transform: scale(1.3);
}

/* -- COUNTDOWN FULL WIDTH -- no gaps, merged with ticker & prize -- */
.countdown-section {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.countdown-section .countdown-panel {
    margin: 0 auto !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(24px, 4vw, 56px) !important;
    padding-right: clamp(24px, 4vw, 56px) !important;
    padding-top: clamp(14px, 2vw, 22px) !important;
    padding-bottom: clamp(14px, 2vw, 22px) !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Remove all gaps between ticker ? countdown ? prize pool */
.ticker+.countdown-section,
.countdown-section+.prize-banner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ticker {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

@media (max-width: 620px) {
    .countdown-section .countdown-panel {
        padding-left: clamp(16px, 4vw, 24px) !important;
        padding-right: clamp(16px, 4vw, 24px) !important;
    }
}

/* -- MOBILE COUNTDOWN -- 2x2 grid layout -- */
@media (max-width: 620px) {
    .countdown-section .countdown-panel {
        padding: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px) !important;
        border-radius: 0 !important;
    }

    .countdown-section .countdown-inner,
    .countdown-inner {
        grid-template-columns: 1fr !important;
        gap: clamp(14px, 3vw, 20px) !important;
        align-items: stretch !important;
    }

    .countdown-copy h2 {
        font-size: clamp(22px, 6.5vw, 30px) !important;
        margin: 6px 0 10px !important;
    }

    .countdown-copy .eyeb.on-dark {
        font-size: 10px !important;
        padding: 4px 10px 4px 8px !important;
        margin-bottom: 10px !important;
    }

    .countdown-copy .countdown-date {
        font-size: 12px !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .countdown-meta {
        gap: 6px !important;
    }

    .countdown-meta span {
        font-size: 10px !important;
        padding: 4px 9px !important;
    }

    .countdown-side {
        justify-items: stretch !important;
    }

    .timer {
        grid-template-columns: 1fr 1fr !important;
        gap: clamp(8px, 2vw, 12px) !important;
    }

    .countdown-separator {
        display: none !important;
    }

    .timer-unit {
        min-height: 64px !important;
        padding: clamp(10px, 2.5vw, 14px) 8px clamp(8px, 2vw, 12px) !important;
        border-radius: clamp(8px, 1.4vw, 12px) !important;
    }

    .timer-unit strong {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    .timer-unit span {
        font-size: 9px !important;
        margin-top: 4px !important;
    }
}

/* -- TABLET COUNTDOWN ? side by side -- */
@media (max-width: 900px) {
    .countdown-section .countdown-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important;
        gap: clamp(16px, 3vw, 24px) !important;
    }
}

/* -- KILL OLD LEADERSHIP + ABSOLUTE FINAL � REMOVED /* ----------------------------------------------
   NUCLEAR LEADERSHIP OVERRIDES - LAST WORD
   ---------------------------------------------- */

/* Card 2-column grid */
body section.leadership-section .leader-card,
body .leadership-section .wrap .leader-grid .leader-card,
body .section.soft.leadership-section .leader-grid .leader-card,
body .leader-grid .leader-card,
body .leadership-section .leader-card,
.leadership-section .leader-card {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    align-items: stretch !important;
    background: rgba(15, 20, 35, .9) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5) !important;
    transition: transform .35s ease, box-shadow .35s !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    margin: 0 !important;
    grid-template-rows: unset !important;
}

/* Kill nth-child overrides from style.css */
body section.leadership-section .leader-card:nth-child(n),
body .leadership-section .leader-card:nth-child(n),
body .leadership-section .leader-card:nth-child(4n+2),
body .leadership-section .leader-card:nth-child(4n+3),
body .leadership-section .leader-card:nth-child(4n) {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    margin: 0 !important;
}

/* Minister Gold */
body .leadership-section .leader-card[data-index="0"],
body .section.soft.leadership-section .leader-card[data-index="0"] {
    border-color: rgba(212, 175, 55, .25) !important;
}

body .leadership-section .leader-card[data-index="0"] .leader-role-badge {
    color: #D4AF37 !important;
    background: rgba(212, 175, 55, .12) !important;
    border-color: rgba(212, 175, 55, .35) !important;
}

/* Secretary Red */
body .leadership-section .leader-card[data-index="1"],
body .section.soft.leadership-section .leader-card[data-index="1"] {
    border-color: rgba(232, 56, 79, .25) !important;
}

body .leadership-section .leader-card[data-index="1"] .leader-role-badge {
    color: #E8384F !important;
    background: rgba(232, 56, 79, .12) !important;
    border-color: rgba(232, 56, 79, .35) !important;
}

/* Left column */
body section.leadership-section .leader-left,
body .leadership-section .leader-left,
.leader-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 28px 20px 24px !important;
    background: rgba(255, 255, 255, .03) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}

/* Photo */
body section.leadership-section .leader-photo-wrap,
body .leadership-section .wrap .leader-grid .leader-photo-wrap,
body .leadership-section .leader-photo-wrap,
.leadership-section .leader-photo-wrap {
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex: none !important;
    margin-bottom: 16px !important;
}

body section.leadership-section .leader-photo-wrap img,
body .leadership-section .wrap .leader-grid .leader-photo-wrap img,
body .leadership-section .leader-photo-wrap img,
.leadership-section .leader-photo-wrap img {
    position: relative !important;
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center top !important;
    border: none !important;
    box-shadow: none !important;
    inset: unset !important;
}

/* Initials */
body section.leadership-section .leader-initials,
body .leadership-section .leader-initials {
    position: relative !important;
    width: 120px !important;
    height: 120px !important;
    inset: unset !important;
    border-radius: 50% !important;
}

/* Leader info */
.leader-info {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.leader-name {
    font: 700 22px/1.2 'Rajdhani', sans-serif !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.leader-role-badge {
    display: inline-block !important;
    font: 700 11px/1 'Rajdhani', sans-serif !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .06) !important;
    width: fit-content !important;
    margin: 0 auto !important;
}

/* Right column */
.leader-right {
    position: relative !important;
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
}

.quote-mark {
    font: 800 64px/1 'Rajdhani', sans-serif !important;
    color: rgba(255, 255, 255, .06) !important;
    position: absolute !important;
    top: 12px !important;
    left: 20px !important;
    pointer-events: none !important;
    margin: 0 !important;
}

.leader-quote {
    margin: 0 !important;
    font: 500 16px/1.85 'Outfit', sans-serif !important;
    color: rgba(255, 255, 255, .72) !important;
    font-style: italic !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 24px !important;
    word-break: break-word !important;
}

/* Hide old classes */
body section.leadership-section .leader-overlay,
body .leadership-section .leader-overlay,
.leadership-section .leader-overlay {
    display: none !important;
}

body section.leadership-section .leader-body,
body .leadership-section .leader-body,
.leadership-section .leader-body {
    display: none !important;
}

body section.leadership-section .leader-body .quote-icon,
body .leadership-section .leader-body .quote-icon {
    display: none !important;
}

body section.leadership-section .leader-name-plate,
body .leadership-section .leader-name-plate {
    display: none !important;
}

body section.leadership-section .leader-top,
body .leadership-section .leader-top {
    display: none !important;
}

body section.leadership-section .leader-bottom,
body .leadership-section .leader-bottom {
    display: none !important;
}

/* Responsive */
@media (max-width: 1024px) {

    body section.leadership-section .leader-grid,
    body .leadership-section .wrap .leader-grid,
    body .section.soft.leadership-section .leader-grid,
    body .leadership-section .leader-grid,
    .leadership-section .leader-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    body .leadership-section .leader-card,
    .leadership-section .leader-card {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    body .leadership-section .leader-left,
    .leader-left {
        flex-direction: row !important;
        gap: 20px !important;
        padding: 24px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    }

    body .leadership-section .leader-photo-wrap img,
    .leadership-section .leader-photo-wrap img {
        max-width: 140px !important;
    }

    body .leadership-section .leader-info,
    .leader-info {
        text-align: left !important;
        margin-top: 0 !important;
    }

    body .leadership-section .leader-role-badge,
    .leader-role-badge {
        margin: 0 !important;
    }
}

@media (max-width: 620px) {

    body .leadership-section .leader-left,
    .leader-left {
        flex-direction: column !important;
        text-align: center !important;
    }

    body .leadership-section .leader-info,
    .leader-info {
        text-align: center !important;
    }

    body .leadership-section .leader-role-badge,
    .leader-role-badge {
        margin: 0 auto !important;
    }

    body .leadership-section .leader-photo-wrap img,
    .leadership-section .leader-photo-wrap img {
        max-width: 160px !important;
    }

    body .leadership-section .leader-right,
    .leader-right {
        padding: 20px 20px 24px !important;
    }

    body .leadership-section .leader-quote,
    .leader-quote {
        font-size: 14.5px !important;
    }
}

/* FINAL RESPONSIVE PASS � public game cards */
body:not(.admin-body) #games .game-grid,
body:not(.admin-body) .section.tight .game-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

body:not(.admin-body) .game-card {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

body:not(.admin-body) .price-chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

body:not(.admin-body) .price-chips p {
    min-width: 0 !important;
    min-height: 74px !important;
    padding: 12px 13px !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
}

body:not(.admin-body) .price-chips small {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.05 !important;
}

body:not(.admin-body) .price-chips strong {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.1 !important;
}

body:not(.admin-body) .price-chips del {
    display: inline-block !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(15, 23, 42, 0.5) !important;
    opacity: 0.7 !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-wrap: anywhere !important;
}

body:not(.admin-body) .price-chips .discount-chip {
    display: none !important;
}

body:not(.admin-body) .game-body>.discount-chip {
    width: fit-content !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    color: #7f1d1d !important;
    background: #fff1f2 !important;
    border: 1px solid rgba(239, 68, 68, .22) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}

body:not(.admin-body) .game-body>.discount-chip i {
    color: #dc2626 !important;
    font-size: 11px !important;
}

@media (max-width: 1100px) {

    body:not(.admin-body) #games .game-grid,
    body:not(.admin-body) .section.tight .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {

    body:not(.admin-body) #games .game-grid,
    body:not(.admin-body) .section.tight .game-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body:not(.admin-body) .game-card {
        max-width: 520px !important;
        margin-inline: auto !important;
        border-radius: 16px !important;
    }

    body:not(.admin-body) .game-image {
        aspect-ratio: 16 / 8.6 !important;
    }

    body:not(.admin-body) .game-body {
        padding: 16px !important;
    }

    body:not(.admin-body) .game-body h3,
    body:not(.admin-body) .game-title-row h3 {
        font-size: clamp(22px, 7vw, 30px) !important;
        line-height: 1.05 !important;
    }

    body:not(.admin-body) .price-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.admin-body) .game-body>.discount-chip {
        margin-bottom: 10px !important;
    }

    body:not(.admin-body) .card-cta {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
    }
}

@media (max-width: 390px) {
    body:not(.admin-body) .price-chips {
        grid-template-columns: 1fr !important;
    }
}

/* FINAL RESPONSIVE PASS � leadership cards */
body section.leadership-section,
body .leadership-section {
    background:
        linear-gradient(180deg, #f7fafc 0%, #edf3f7 100%) !important;
}

body section.leadership-section .leader-grid,
body .leadership-section .leader-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

body section.leadership-section .leader-card,
body .leadership-section .leader-card {
    display: grid !important;
    grid-template-columns: minmax(190px, .42fr) minmax(0, .58fr) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12) !important;
}

body section.leadership-section .leader-left,
body .leadership-section .leader-left {
    background: #f8fafc !important;
    border-right: 1px solid rgba(15, 23, 42, .08) !important;
    border-bottom: 0 !important;
    padding: 24px 18px !important;
    color: #111827 !important;
}

body section.leadership-section .leader-right,
body .leadership-section .leader-right {
    background: #ffffff !important;
    padding: 28px 26px !important;
}

body section.leadership-section .leader-name,
body .leadership-section .leader-name {
    color: #111827 !important;
}

body section.leadership-section .leader-role-badge,
body .leadership-section .leader-role-badge {
    color: #b42318 !important;
    background: #fff1f2 !important;
    border-color: rgba(180, 35, 24, .20) !important;
}

body section.leadership-section .leader-quote,
body .leadership-section .leader-quote {
    color: #334155 !important;
}

body section.leadership-section .quote-mark,
body .leadership-section .quote-mark {
    color: rgba(180, 35, 24, .10) !important;
}

@media (max-width: 1100px) {

    body section.leadership-section .leader-grid,
    body .leadership-section .leader-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {

    body section.leadership-section .leader-card,
    body .leadership-section .leader-card {
        grid-template-columns: 1fr !important;
    }

    body section.leadership-section .leader-left,
    body .leadership-section .leader-left {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
        text-align: left !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
        padding: 16px !important;
    }

    body section.leadership-section .leader-photo-wrap,
    body .leadership-section .leader-photo-wrap {
        margin: 0 !important;
    }

    body section.leadership-section .leader-photo-wrap img,
    body .leadership-section .leader-photo-wrap img {
        width: 88px !important;
        height: 88px !important;
        max-width: 88px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    body section.leadership-section .leader-info,
    body .leadership-section .leader-info {
        text-align: left !important;
        margin: 0 !important;
    }

    body section.leadership-section .leader-role-badge,
    body .leadership-section .leader-role-badge {
        margin: 0 !important;
        white-space: normal !important;
    }

    body section.leadership-section .leader-right,
    body .leadership-section .leader-right {
        padding: 18px 16px 20px !important;
    }
}

/* Final public-site branding and mobile layout overrides. */
body:not(.admin-body) .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border-bottom: 2px solid #8b1a1a !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .45) !important;
}

body:not(.admin-body) .nav.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(26px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
    border-bottom: 2px solid #8b1a1a !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .55) !important;
}

body:not(.admin-body) .nav .nav-links>a {
    color: var(--site-nav-text, #FFFFFF) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

body:not(.admin-body) .nav .nav-links>a.active::after {
    background: var(--site-nav-accent, #FF1744) !important;
    box-shadow: 0 0 10px var(--site-nav-accent, #FF1744) !important;
}

body:not(.admin-body) .nav .brand.has-logo .brand-text,
body.admin-body .brand.has-logo .brand-text {
    display: none !important;
}

.brand.has-logo .brand-logo {
    display: block !important;
    width: 122px !important;
    height: 44px !important;
    flex: 0 0 122px !important;
    max-width: 122px !important;
    object-fit: contain !important;
    object-position: left center !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Keep the supplied Nexora artwork completely visible rather than cropping it. */
.hero,
.hero-slider {
    background-color: #080b10 !important;
}

.hero-slide {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.sponsor-marquee+.sponsor-marquee {
    margin-top: 14px !important;
}

.sponsor-marquee-track.is-reversed {
    animation-direction: reverse !important;
}

body:not(.admin-body) #games .price-chips del,
body:not(.admin-body) #games .price-cell del {
    text-decoration-color: currentColor !important;
}

/* Hero image clarity � lighter overlay */
.hero-overlay {
    background:
        linear-gradient(90deg, rgba(8, 10, 14, .72) 0%, rgba(8, 10, 14, .48) 45%, rgba(8, 10, 14, .18) 100%),
        linear-gradient(0deg, rgba(8, 10, 14, .55), transparent 50%) !important;
}

/* Fixed nav spacer � push content below fixed navbar */
body:not(.admin-body) main {
    padding-top: 72px !important;
}

@media (max-width: 760px) {
    body:not(.admin-body) .nav-inner {
        height: 72px !important;
        min-height: 72px !important;
    }

    body:not(.admin-body) .brand.has-logo .brand-logo {
        width: 108px !important;
        height: 38px !important;
        flex-basis: 108px !important;
        max-width: 108px !important;
    }

    .hero {
        min-height: 360px !important;
    }

    .hero-slide {
        background-size: contain !important;
        background-position: center center !important;
    }

    /* Compact registration cards without losing their price and deadline details. */
    body:not(.admin-body) #games .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 10px !important;
    }

    body:not(.admin-body) #games .game-card {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body:not(.admin-body) #games .game-image {
        aspect-ratio: 16 / 9 !important;
    }

    body:not(.admin-body) #games .game-body {
        min-height: 0 !important;
        padding: 8px !important;
    }

    body:not(.admin-body) #games .game-body h3 {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    body:not(.admin-body) #games .price-grid,
    body:not(.admin-body) #games .price-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body:not(.admin-body) #games .price-cell,
    body:not(.admin-body) #games .price-chips p {
        min-height: 48px !important;
        padding: 6px !important;
        font-size: 10px !important;
    }

    body:not(.admin-body) #games .price-chips strong {
        font-size: 14px !important;
    }

    body:not(.admin-body) #games .price-chips small,
    body:not(.admin-body) #games .window-note {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    body:not(.admin-body) #games .card-cta {
        min-height: 34px !important;
        margin-top: 8px !important;
        padding: 7px 6px !important;
    }
}

/* -------------------------------------------
   FINAL CONFLICT RESOLUTION � must load last
   ------------------------------------------- */

/* Counter style.css line 4146 nav override */
body:not(.admin-body) .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--site-nav-bg, #0c0c10) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .45) !important;
}

body:not(.admin-body) .nav.scrolled {
    background:
        linear-gradient(rgba(6, 7, 10, .28), rgba(6, 7, 10, .28)),
        var(--site-nav-bg, #0a0a0e) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border-bottom: 2px solid #8b1a1a !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .55) !important;
}

/* Counter style.css line 13442 hero-overlay mobile */
@media (max-width: 620px) {
    .hero-overlay {
        background:
            linear-gradient(90deg, rgba(8, 10, 14, .72) 0%, rgba(8, 10, 14, .48) 45%, rgba(8, 10, 14, .18) 100%),
            linear-gradient(0deg, rgba(8, 10, 14, .55), transparent 50%) !important;
    }

    .hero {
        min-height: 430px !important;
        padding-top: 44px !important;
    }

    .hero-slide {
        background-size: contain !important;
        background-position: center center !important;
    }
}

/* ---------------------------------------------------------------
   HERO � Responsive <img>, no cropping, natural aspect ratio
   --------------------------------------------------------------- */

.hero {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    background: #06080c !important;
}

.hero-slider {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.hero-slide {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    transition: none !important;
}

.hero-slide.active {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}

.hero-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.hero-slide.fallback {
    display: none !important;
    min-height: 200px !important;
}

.hero-slide.fallback.active {
    display: block !important;
}

.hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.hero-inner {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-content {
    position: relative !important;
    text-align: center !important;
}

.hero-acts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
}

.hero-dots {
    position: absolute !important;
    z-index: 3 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 24px !important;
    display: flex !important;
    gap: 8px !important;
}

/* -- Mobile GPU optimization: disable backdrop-filter on small screens -- */
@media (max-width: 768px) {

    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .nav,
    .nav.scrolled {
        backdrop-filter: blur(18px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    }
}

/* -----------------------------------------------------------
   SITE-WIDE: Scroll reveal animation
   ----------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal:nth-child(2) {
    transition-delay: .08s;
}

.reveal:nth-child(3) {
    transition-delay: .16s;
}

.reveal:nth-child(4) {
    transition-delay: .24s;
}

/* -- Glow button -- */
.has-glow {
    box-shadow: 0 0 24px rgba(232, 56, 79, .35), 0 0 48px rgba(232, 56, 79, .15);
}

.has-glow:hover {
    box-shadow: 0 0 32px rgba(232, 56, 79, .5), 0 0 64px rgba(232, 56, 79, .2);
}

/* -----------------------------------------------------------
   ABOUT PAGE
   ----------------------------------------------------------- */
.about-hero {
    padding: 120px 0 60px;
    background: linear-gradient(180deg, #080a12 0%, #0d1017 100%);
    text-align: center;
}

.about-story-grid,
.about-rules-grid,
.about-contact-grid {
    display: grid;
    gap: 24px;
}

.about-story-grid {
    grid-template-columns: 1fr 1fr;
}

.about-rules-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.about-contact-grid {
    grid-template-columns: 1fr 1fr;
}

.about-copy-panel {
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.about-feature-list {
    padding: 0;
    list-style: none;
}

.about-contact .form-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: clamp(20px, 3vw, 32px);
}

@media (max-width: 768px) {

    .about-story-grid,
    .about-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------
   REGISTRATION PAGE � Dark Esports Theme
   ----------------------------------------------------------- */

/* -- Section background: dark + subtle red neon lines -- */
#reg-form {
    position: relative;
    background: #06080d;
    overflow: hidden;
}

#reg-form::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 60px,
            rgba(232, 56, 79, .025) 60px,
            rgba(232, 56, 79, .025) 61px,
            transparent 61px,
            transparent 120px),
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 180px,
            rgba(232, 56, 79, .018) 180px,
            rgba(232, 56, 79, .018) 181px,
            transparent 181px,
            transparent 300px);
    pointer-events: none;
    z-index: 0;
}

#reg-form::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 56, 79, .06), transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
    z-index: 0;
}

#reg-form>.wrap {
    position: relative;
    z-index: 1;
}

/* -- Registration hero -- */
.reg-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 50px;
    background: linear-gradient(135deg, #06080d 0%, #0e1118 50%, #080a12 100%);
    text-align: center;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.reg-hero-bg::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 56, 79, .1), transparent 70%);
    top: -120px;
    right: -100px;
}

.reg-hero-bg::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 164, 32, .06), transparent 70%);
    bottom: -100px;
    left: -80px;
}

.reg-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.reg-hero h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
}

.reg-hero .lead {
    font-size: 16px;
    color: #8892a4;
    max-width: 540px;
    margin: 0 auto;
}

.reg-hero-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.reg-hero-poster {
    flex: 0 0 320px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

.reg-hero-poster img {
    width: 100%;
    display: block;
}

.reg-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}

.reg-hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #b0b8c8;
    font-size: 13px;
    font-weight: 600;
}

.reg-hero-tags span i {
    color: #e8384f;
}

/* -- Closed box -- */
.closed-box {
    max-width: 480px;
    margin: 40px auto;
    padding: 32px 24px;
    background: #0e1118;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    text-align: center;
}

.closed-box .icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(232, 56, 79, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: #e8384f;
}

.closed-box h2 {
    font-size: 20px;
    color: #ffffff;
    margin: 0 0 8px;
}

.closed-box p {
    color: #8892a4;
    font-size: 14px;
    margin: 0;
}

/* -- Register container -- */
.register-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

/* -- Process cards (3-step) -- */
.register-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.process-card {
    background: #0e1118;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    transition: border-color .3s;
}

.process-card:hover {
    border-color: rgba(232, 56, 79, .25);
}

.process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8384f, #d4a420);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 12px;
}

.process-card strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.process-card p {
    font-size: 12.5px;
    color: #6b7590;
    margin: 0;
    line-height: 1.5;
}

/* -- Two-column layout -- */
.register-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 24px);
    align-items: start;
}

/* -- Side panel (payment info) -- */
.register-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 90px;
}

/* -- Notice box -- */
.notice-box {
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(212, 164, 32, .08);
    border: 1px solid rgba(212, 164, 32, .18);
    color: #d4a420;
    line-height: 1.5;
}

.notice-box.amber {
    background: rgba(212, 164, 32, .08);
    border-color: rgba(212, 164, 32, .18);
    color: #d4a420;
}

.notice-box strong {
    color: #f0c850;
}

.notice-box p {
    margin: 4px 0 0;
    color: #a89060;
    font-weight: 500;
}

.notice-box i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 16px;
    color: #d4a420;
}

/* -- Payment highlight card -- */
.payment-highlight {
    background: #0e1118;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 22px;
}

.payment-highlight>strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
}

.payment-highlight>strong i {
    color: #d4a420;
}

.payment-detail-list {
    display: grid;
    gap: 6px;
    margin: 0;
}

.payment-detail-list p {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.payment-detail-list span {
    color: #6b7590;
    font-size: 12px;
    font-weight: 700;
}

.payment-detail-list strong {
    min-width: 0;
    color: #d0d6e4;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.payment-qr-box {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

.payment-qr-box img {
    display: block;
    width: min(100%, 200px);
    aspect-ratio: 1;
}

.account {
    margin: 10px 0 0;
    padding: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    font-size: 13px;
    color: #b0b8c8;
    word-break: break-all;
}

.payment-highlight small {
    display: block;
    margin-top: 10px;
    font-size: 11.5px;
    color: #555e74;
    line-height: 1.5;
}

/* -- Form panel (right side) -- */
.register-form-panel {
    background: #0e1118;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 28px;
}

/* -- Form sections -- */
.form-section {
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.form-section:first-child {
    padding-top: 0;
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section .form-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 18px;
}

.step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8384f, #d4a420);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

/* -- Form grid -- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

/* -- Form labels -- */
.register-form label {
    display: grid;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #8892a4;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* -- Form inputs (dark theme) -- */
.register-form input,
.register-form select,
.register-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #e0e6f0;
    font: 600 14px/1.5 inherit;
    transition: border-color .25s, box-shadow .25s, background .25s;
    box-sizing: border-box;
}

.register-form input::placeholder,
.register-form textarea::placeholder {
    color: #454e64;
}

.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus {
    outline: none;
    border-color: #e8384f;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .12);
    background: rgba(255, 255, 255, .06);
}

.register-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7590' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.register-form select option {
    background: #0e1118;
    color: #e0e6f0;
}

.register-form textarea {
    min-height: 90px;
    resize: vertical;
}

.field-hint {
    font-size: 11.5px;
    color: #555e74;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* -- Team fields -- */
.team-fields {
    display: grid;
    gap: 12px;
}

.member-list-builder {
    display: grid;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px dashed rgba(255, 255, 255, .08);
    border-radius: 10px;
}

/* -- Price preview -- */
.price-preview-wrap {
    background: rgba(232, 56, 79, .04);
    border: 1px solid rgba(232, 56, 79, .12);
    border-radius: 12px;
    padding: 18px;
    display: grid;
    gap: 8px;
}

.price-preview-wrap>span {
    color: #8892a4;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.price-preview {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
}

.price-preview strong {
    color: #4ade80;
    font-size: 26px;
}

.price-preview del {
    color: #555e74;
    font-size: 16px;
    text-decoration-line: line-through;
    text-decoration-color: #e8384f;
    text-decoration-thickness: 2px;
}

/* -- Submit footer -- */
.register-submit-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 18px 28px;
    margin: 0 -28px -28px;
    background: rgba(14, 17, 24, .92);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 0 0 14px 14px;
}

.register-submit-footer p {
    margin: 0;
    max-width: 500px;
    text-align: center;
    flex-shrink: 0;
}

/* -- Submit button -- */
.submit-btn {
    padding: 13px 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8384f, #c42040);
    color: #ffffff;
    font: 800 15px/1 inherit;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(232, 56, 79, .3);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(232, 56, 79, .45);
}

.submit-btn:active {
    transform: translateY(0);
}

/* -- Submit overlay -- */
.submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(6, 8, 13, .85);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
}

.submit-overlay[aria-hidden="false"] {
    display: flex;
}

.submit-overlay-card {
    background: #0e1118;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.submit-overlay-card strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 8px;
}

.submit-overlay-card p {
    color: #6b7590;
    font-size: 14px;
    margin: 0;
}

.submit-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, .08);
    border-top-color: #e8384f;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 18px;
}

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

.loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.submit-btn.is-loading .loader {
    display: inline-block;
}

.submit-btn.is-loading [data-btn-label] {
    display: none;
}

/* -- Empty state -- */
.empty {
    text-align: center;
    padding: 36px 20px;
    color: #555e74;
    font-size: 14px;
    border: 1px dashed rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.empty i {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
    opacity: .4;
}

/* -- Discount chip -- */
.discount-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(74, 222, 128, .08);
    color: #4ade80;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid rgba(74, 222, 128, .18);
}

/* -- Registration responsive -- */
@media (max-width: 980px) {
    .register-layout {
        grid-template-columns: 1fr;
    }

    .register-side {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .reg-hero {
        padding: 90px 0 36px;
        min-height: 220px;
    }

    .reg-hero h1 {
        font-size: 26px;
    }

    .reg-hero-inner {
        flex-direction: column;
    }

    .reg-hero-poster {
        flex: none;
        width: 100%;
        max-width: 280px;
    }

    .register-container {
        padding: 0 14px;
    }

    .register-process {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .register-form-panel {
        padding: 20px;
    }

    .register-side {
        grid-template-columns: 1fr;
    }

    .register-submit-footer {
        margin: 0 -20px -20px;
        padding: 14px 20px;
        flex-direction: column;
        gap: 10px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .register-form input,
    .register-form select,
    .register-form textarea {
        font-size: 16px;
    }

    .submit-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .process-card {
        padding: 16px;
    }

    .form-section .form-title {
        font-size: 15px;
    }

    .price-preview {
        font-size: 22px;
    }

    .price-preview strong {
        font-size: 22px;
    }
}

/* ============================================================
   NEXORA ESPORTS ADMIN � Premium Dark Theme
   ============================================================ */

/* -- Global admin background: dark + red diagonal lines -- */
body.admin-body {
    background: #06080d !important;
    color: #c8cdd8 !important;
}

body.admin-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 80px,
            rgba(232, 56, 79, .018) 80px,
            rgba(232, 56, 79, .018) 81px,
            transparent 81px,
            transparent 180px),
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 220px,
            rgba(232, 56, 79, .012) 220px,
            rgba(232, 56, 79, .012) 221px,
            transparent 221px,
            transparent 400px);
    pointer-events: none;
    z-index: 0;
}

body.admin-body>* {
    position: relative;
    z-index: 1;
}

/* -- SIDEBAR � Premium esports style -- */
body.admin-body .admin-side,
body.admin-body aside.admin-side {
    background: #0a0c12 !important;
    border-right: 1px solid rgba(255, 255, 255, .05) !important;
}

body.admin-body .admin-side-head {
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 18px 16px !important;
}

body.admin-body .brand .brand-mark {
    background: linear-gradient(135deg, #e8384f, #d4a420) !important;
    color: #fff !important;
    font-weight: 900 !important;
    border-radius: 10px !important;
}

body.admin-body .brand .brand-text span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.admin-body .brand .brand-text small {
    color: #555e74 !important;
    font-weight: 600 !important;
}

body.admin-body .admin-side-nav {
    padding: 8px 10px !important;
}

body.admin-body .side-label {
    color: #e8384f !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 16px 12px 6px !important;
    opacity: .85 !important;
}

body.admin-body .admin-side-nav a:not(.brand) {
    color: #8892a4 !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    margin: 1px 0 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    transition: all .2s !important;
    border: 1px solid transparent !important;
}

body.admin-body .admin-side-nav a:not(.brand):hover {
    background: rgba(232, 56, 79, .08) !important;
    color: #e0e6f0 !important;
    border-color: rgba(232, 56, 79, .12) !important;
}

body.admin-body .admin-side-nav a:not(.brand) i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 8px !important;
    font-size: 14px !important;
}

body.admin-body .admin-side-nav a.active,
body.admin-body .admin-side-nav a:not(.brand).active {
    background: linear-gradient(135deg, rgba(232, 56, 79, .2), rgba(232, 56, 79, .08)) !important;
    color: #ffffff !important;
    border-color: rgba(232, 56, 79, .3) !important;
    box-shadow: 0 0 20px rgba(232, 56, 79, .12), inset 0 0 20px rgba(232, 56, 79, .05) !important;
    font-weight: 700 !important;
}

body.admin-body .admin-side-nav a.active i,
body.admin-body .admin-side-nav a:not(.brand).active i {
    color: #e8384f !important;
}

body.admin-body .admin-side-nav .logout {
    color: #6b7590 !important;
    border-top: 1px solid rgba(255, 255, 255, .05) !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
}

body.admin-body .admin-side-nav .logout:hover {
    color: #e8384f !important;
    background: rgba(232, 56, 79, .06) !important;
}

/* -- MAIN CONTENT AREA -- */
body.admin-body .admin-main,
body.admin-body main.admin-main {
    background: transparent !important;
}

/* -- PAGE HEADER -- */
body.admin-body .admin-head .eyebrow {
    color: #e8384f !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* ============================================================
   GALLERY PAGE � DARK ESPORTS CHAMPIONSHIP REDESIGN
   ============================================================ */

/* -- Background & Page Container -- */
body:not(.admin-body) .gallery-page-section {
    position: relative;
    background: #080a12 !important;
    padding: clamp(40px, 5vw, 72px) 0 !important;
    overflow: hidden !important;
}

/* Diagonal red lines */
body:not(.admin-body) .gallery-page-section::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 90px,
            rgba(232, 56, 79, 0.025) 90px,
            rgba(232, 56, 79, 0.025) 92px),
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 150px,
            rgba(212, 164, 32, 0.018) 150px,
            rgba(212, 164, 32, 0.018) 152px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ambient red glow orbs */
body:not(.admin-body) .gallery-page-section::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 700px 500px at 15% 30%, rgba(232, 56, 79, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 85% 70%, rgba(212, 164, 32, 0.04) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

body:not(.admin-body) .gallery-page-section>.wrap {
    position: relative;
    z-index: 1;
}

/* -- Hero / Page Head -- */
body:not(.admin-body) .gallery-page-head {
    position: relative !important;
    background: linear-gradient(180deg, #0c0e13 0%, #141820 50%, #080a12 100%) !important;
    border-bottom: 1px solid rgba(232, 56, 79, 0.12) !important;
    padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px) !important;
    overflow: hidden !important;
}

/* Hero diagonal lines */
body:not(.admin-body) .gallery-page-head::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 100px,
            rgba(232, 56, 79, 0.03) 100px,
            rgba(232, 56, 79, 0.03) 102px) !important;
    pointer-events: none !important;
}

/* Hero red glow behind heading */
body:not(.admin-body) .gallery-page-head::after {
    content: '' !important;
    position: absolute !important;
    top: 30% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 500px !important;
    height: 300px !important;
    background: radial-gradient(ellipse, rgba(232, 56, 79, 0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

body:not(.admin-body) .gallery-page-head .wrap {
    position: relative;
    z-index: 1;
}

body:not(.admin-body) .gallery-page-head .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(232, 56, 79, 0.10) !important;
    border: 1px solid rgba(232, 56, 79, 0.25) !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #e8384f !important;
    margin-bottom: 20px !important;
}

body:not(.admin-body) .gallery-page-head .eyebrow::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #e8384f !important;
    animation: pulse-dot 1.6s ease-in-out infinite !important;
}

body:not(.admin-body) .gallery-page-head h1 {
    font-size: clamp(36px, 5.5vw, 60px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    margin: 0 0 18px !important;
    text-shadow: 0 0 60px rgba(232, 56, 79, 0.15) !important;
}

body:not(.admin-body) .gallery-page-head .lead {
    max-width: 600px !important;
    margin-inline: auto !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* -- Gallery Grid -- */
body:not(.admin-body) .gallery-page-section .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: stretch !important;
}

/* -- Gallery Cards � Dark Premium -- */
body:not(.admin-body) .gallery-page-section .gallery-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: zoom-in !important;
    background: rgba(20, 24, 32, 0.7) !important;
    border: 1px solid rgba(232, 56, 79, 0.10) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 0 0 rgba(232, 56, 79, 0) !important;
    transition: transform 0.45s cubic-bezier(.2, .7, .3, 1),
        box-shadow 0.45s cubic-bezier(.2, .7, .3, 1),
        border-color 0.45s cubic-bezier(.2, .7, .3, 1) !important;
}

body:not(.admin-body) .gallery-page-section .gallery-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(232, 56, 79, 0.28) !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(232, 56, 79, 0.08) !important;
    z-index: 5 !important;
}

/* -- Gallery Media (image container) -- */
body:not(.admin-body) .gallery-page-section .gallery-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: #0c0e13 !important;
    flex: 0 0 auto !important;
}

/* Dark gradient overlay at bottom of image */
body:not(.admin-body) .gallery-page-section .gallery-media::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg,
            rgba(10, 12, 16, 0.55) 0%,
            rgba(10, 12, 16, 0.10) 35%,
            transparent 60%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.4s !important;
}

body:not(.admin-body) .gallery-page-section .gallery-card:hover .gallery-media::before {
    opacity: 0.7 !important;
}

/* Zoom icon on hover */
body:not(.admin-body) .gallery-page-section .gallery-media::after {
    content: "\f00e" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(10, 12, 16, 0.85) !important;
    border: 1px solid rgba(232, 56, 79, 0.25) !important;
    color: #e8384f !important;
    font-size: 16px !important;
    opacity: 0 !important;
    transition: opacity 0.35s, transform 0.35s !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body:not(.admin-body) .gallery-page-section .gallery-card:hover .gallery-media::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* -- Gallery Image -- */
body:not(.admin-body) .gallery-page-section .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(.2, .7, .3, 1) !important;
}

body:not(.admin-body) .gallery-page-section .gallery-card:hover img {
    transform: scale(1.08) !important;
}

/* -- Figcaption (title area � always visible) -- */
body:not(.admin-body) .gallery-page-section .gallery-card figcaption {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    gap: 4px !important;
    padding: 16px 18px 18px !important;
    background: rgba(20, 24, 32, 0.85) !important;
    border-top: 1px solid rgba(232, 56, 79, 0.08) !important;
    color: #ffffff !important;
    transform: none !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    backdrop-filter: blur(4px) !important;
}

body:not(.admin-body) .gallery-page-section .gallery-card figcaption strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
}

body:not(.admin-body) .gallery-page-section .gallery-card figcaption span {
    display: block !important;
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 2px !important;
}

/* -- Responsive: Tablet -- */
@media (max-width: 900px) {
    body:not(.admin-body) .gallery-page-section .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

/* -- Responsive: Mobile -- */
@media (max-width: 600px) {
    body:not(.admin-body) .gallery-page-section .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body:not(.admin-body) .gallery-page-section .gallery-card {
        border-radius: 12px !important;
    }

    body:not(.admin-body) .gallery-page-section .gallery-media {
        aspect-ratio: 1 / 1 !important;
    }

    body:not(.admin-body) .gallery-page-section .gallery-card figcaption {
        padding: 12px 14px 14px !important;
    }

    body:not(.admin-body) .gallery-page-section .gallery-card figcaption strong {
        font-size: 13px !important;
    }

    body:not(.admin-body) .gallery-page-section .gallery-card figcaption span {
        font-size: 11px !important;
    }
}

@media (max-width: 380px) {
    body:not(.admin-body) .gallery-page-section .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        max-width: 360px !important;
        margin-inline: auto !important;
    }

    body:not(.admin-body) .gallery-page-section .gallery-media {
        aspect-ratio: 16 / 10 !important;
    }
}

/* -- Lightbox � dark/red esports theme -- */
.lightbox {
    background: rgba(6, 8, 12, 0.94) !important;
    backdrop-filter: blur(10px) !important;
}

.lightbox img {
    border-radius: 12px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(232, 56, 79, 0.06) !important;
}

.lightbox-caption {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.admin-body .admin-head h1 {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}

body.admin-body .admin-head p {
    color: #6b7590 !important;
    font-size: 14px !important;
}

body.admin-body .admin-head p strong {
    color: #d4a420 !important;
}

/* -- ADMIN PANEL CONTAINER -- */
body.admin-body .admin-panel {
    background: #0e1118 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3) !important;
}

body.admin-body .admin-panel h2 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.admin-body .admin-panel h2 i {
    color: #e8384f !important;
}

/* -- FILTER BAR -- */
body.admin-body .filter-bar {
    background: rgba(255, 255, 255, .02) !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    gap: 12px !important;
}

body.admin-body .filter-bar label {
    color: #8892a4 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
}

body.admin-body .filter-bar .field-hint {
    color: #454e64 !important;
    text-transform: none !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
}

body.admin-body .filter-bar input,
body.admin-body .filter-bar select {
    background: rgba(255, 255, 255, .04) !important;
    color: #e0e6f0 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    transition: border-color .2s, box-shadow .2s !important;
}

body.admin-body .filter-bar input:focus,
body.admin-body .filter-bar select:focus {
    border-color: #e8384f !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .12) !important;
    outline: none !important;
}

body.admin-body .filter-bar input::placeholder {
    color: #3a4258 !important;
}

body.admin-body .filter-bar select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7590' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

body.admin-body .filter-bar select option {
    background: #0e1118 !important;
    color: #e0e6f0 !important;
}

body.admin-body .filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-end !important;
}

body.admin-body .filter-actions .btn.primary {
    background: linear-gradient(135deg, #e8384f, #c42040) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(232, 56, 79, .25) !important;
    font-weight: 700 !important;
}

body.admin-body .filter-actions .btn.primary:hover {
    box-shadow: 0 6px 24px rgba(232, 56, 79, .4) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .filter-actions .btn.outline {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #8892a4 !important;
    background: transparent !important;
}

body.admin-body .filter-actions .btn.outline:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: #e0e6f0 !important;
}

/* -- RESULT SUMMARY -- */
body.admin-body .result-summary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    color: #8892a4 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    margin-bottom: 16px !important;
}

body.admin-body .result-summary strong {
    color: #ffffff !important;
    font-size: 18px !important;
}

body.admin-body .dot-paid,
body.admin-body .dot-unpaid,
body.admin-body .dot-verification {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

body.admin-body .dot-paid::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    box-shadow: 0 0 8px rgba(74, 222, 128, .4) !important;
}

body.admin-body .dot-paid {
    color: #4ade80 !important;
}

body.admin-body .dot-unpaid::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #e8384f !important;
    box-shadow: 0 0 8px rgba(232, 56, 79, .4) !important;
}

body.admin-body .dot-unpaid {
    color: #e8384f !important;
}

body.admin-body .dot-verification::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, .4) !important;
}

body.admin-body .dot-verification {
    color: #f59e0b !important;
}

/* -- EXPORT BUTTONS -- */
body.admin-body .result-summary .btn.primary {
    background: linear-gradient(135deg, #e8384f, #c42040) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(232, 56, 79, .2) !important;
    font-weight: 700 !important;
}

body.admin-body .result-summary .btn.primary:hover {
    box-shadow: 0 6px 24px rgba(232, 56, 79, .35) !important;
}

body.admin-body .result-summary .btn.outline {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #8892a4 !important;
    background: rgba(255, 255, 255, .03) !important;
}

body.admin-body .result-summary .btn.outline:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #e0e6f0 !important;
}

/* -- GAME REGISTRATION TABS -- */
body.admin-body .game-registration-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
}

body.admin-body .game-registration-tab {
    flex: 0 0 auto !important;
    padding: 9px 18px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #8892a4 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    white-space: nowrap !important;
}

body.admin-body .game-registration-tab:hover {
    background: rgba(232, 56, 79, .06) !important;
    border-color: rgba(232, 56, 79, .15) !important;
    color: #e0e6f0 !important;
}

body.admin-body .game-registration-tab.active {
    background: linear-gradient(135deg, #e8384f, #c42040) !important;
    border-color: #e8384f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(232, 56, 79, .3) !important;
}

body.admin-body .game-registration-tab span {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 22px !important;
    height: 22px !important;
    margin-left: 6px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .12) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.admin-body .game-registration-tab.active span {
    background: rgba(255, 255, 255, .2) !important;
}

/* -- GAME PANEL HEADING -- */
body.admin-body .game-panel-heading {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
}

body.admin-body .game-panel-heading .eyebrow {
    color: #e8384f !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 4px !important;
}

body.admin-body .game-panel-heading h2 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

body.admin-body .game-panel-heading>span {
    color: #555e74 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* -- TABLE -- */
body.admin-body .admin-table-wrap {
    background: #0a0c12 !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

body.admin-body .admin-table-wrap table {
    min-width: 900px !important;
}

body.admin-body .admin-table-wrap th {
    background: #0e1118 !important;
    color: #6b7590 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    white-space: nowrap !important;
}

body.admin-body .admin-table-wrap td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .04) !important;
    color: #c8cdd8 !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
}

body.admin-body .admin-table-wrap td strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body.admin-body .admin-table-wrap td small {
    display: block !important;
    color: #555e74 !important;
    font-size: 12px !important;
    margin-top: 3px !important;
}

/* -- TABLE ROW STATUS COLORS -- */
body.admin-body .game-registration-table tr.row-paid>td {
    background: rgba(74, 222, 128, .04) !important;
    border-left: 3px solid rgba(74, 222, 128, .4) !important;
}

body.admin-body .game-registration-table tr.row-unpaid>td {
    background: rgba(232, 56, 79, .04) !important;
    border-left: 3px solid rgba(232, 56, 79, .4) !important;
}

body.admin-body .game-registration-table tr.row-under_verification>td {
    background: rgba(245, 158, 11, .04) !important;
    border-left: 3px solid rgba(245, 158, 11, .4) !important;
}

body.admin-body .game-registration-row {
    transition: background .15s !important;
}

body.admin-body .game-registration-row:hover {
    background: rgba(255, 255, 255, .03) !important;
}

/* -- INLINE PAYMENT FORM -- */
body.admin-body .inline-payment-form select {
    background: rgba(255, 255, 255, .04) !important;
    color: #e0e6f0 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7590' d='M1.5 3l3.5 4 3.5-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 24px !important;
}

body.admin-body .inline-payment-form select:focus {
    border-color: #e8384f !important;
    outline: none !important;
}

body.admin-body .inline-payment-form select option {
    background: #0e1118 !important;
    color: #e0e6f0 !important;
}

/* -- ACTION BUTTONS -- */
body.admin-body .mini-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #8892a4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body.admin-body .mini-action:hover {
    background: rgba(232, 56, 79, .08) !important;
    border-color: rgba(232, 56, 79, .2) !important;
    color: #e8384f !important;
}

body.admin-body .registration-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* -- AJAX FEEDBACK -- */
body.admin-body .ajax-feedback {
    background: rgba(74, 222, 128, .08) !important;
    border: 1px solid rgba(74, 222, 128, .2) !important;
    border-radius: 10px !important;
    color: #4ade80 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2) !important;
}

body.admin-body .ajax-feedback.error {
    background: rgba(232, 56, 79, .08) !important;
    border-color: rgba(232, 56, 79, .2) !important;
    color: #e8384f !important;
}

/* -- FLASH MODAL (admin dark theme) -- */
body.admin-body .flash-modal.success {
    background: rgba(74, 222, 128, .1) !important;
    border: 1px solid rgba(74, 222, 128, .25) !important;
    color: #4ade80 !important;
}
body.admin-body .flash-modal.success .flash-modal-icon {
    background: rgba(74, 222, 128, .15) !important;
    color: #4ade80 !important;
}

body.admin-body .flash-modal.danger {
    background: rgba(232, 56, 79, .1) !important;
    border: 1px solid rgba(232, 56, 79, .25) !important;
    color: #e8384f !important;
}
body.admin-body .flash-modal.danger .flash-modal-icon {
    background: rgba(232, 56, 79, .15) !important;
    color: #e8384f !important;
}

body.admin-body .flash-modal.warning {
    background: rgba(245, 158, 11, .1) !important;
    border: 1px solid rgba(245, 158, 11, .25) !important;
    color: #f59e0b !important;
}
body.admin-body .flash-modal.warning .flash-modal-icon {
    background: rgba(245, 158, 11, .15) !important;
    color: #f59e0b !important;
}

body.admin-body .flash-modal.info {
    background: rgba(6, 182, 212, .1) !important;
    border: 1px solid rgba(6, 182, 212, .25) !important;
    color: #06b6d4 !important;
}
body.admin-body .flash-modal.info .flash-modal-icon {
    background: rgba(6, 182, 212, .15) !important;
    color: #06b6d4 !important;
}

body.admin-body .flash-modal-close { color: inherit !important; }

/* -- EMPTY STATE -- */
body.admin-body .empty {
    background: rgba(255, 255, 255, .02) !important;
    border: 1px dashed rgba(255, 255, 255, .08) !important;
    color: #454e64 !important;
}

/* -- REMAINING VALUE -- */
body.admin-body .remaining-value {
    color: #555e74 !important;
}

/* -- MUTED LINE -- */
body.admin-body .muted-line {
    color: #454e64 !important;
}

/* -- ADMIN FORM INPUTS (dark theme) -- */
body.admin-body .admin-panel label,
body.admin-body .admin-form label,
body.admin-body .admin-form-grid label {
    color: #8892a4 !important;
    font-weight: 700 !important;
}

body.admin-body .admin-panel input,
body.admin-body .admin-panel select,
body.admin-body .admin-panel textarea,
body.admin-body .admin-form input,
body.admin-body .admin-form select,
body.admin-body .admin-form textarea,
body.admin-body .admin-form-grid input,
body.admin-body .admin-form-grid select,
body.admin-body .admin-form-grid textarea {
    background: rgba(255, 255, 255, .04) !important;
    color: #e0e6f0 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

body.admin-body .admin-panel input:focus,
body.admin-body .admin-panel select:focus,
body.admin-body .admin-panel textarea:focus,
body.admin-body .admin-form input:focus,
body.admin-body .admin-form select:focus,
body.admin-body .admin-form textarea:focus {
    border-color: #e8384f !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .12) !important;
    outline: none !important;
}

body.admin-body .admin-panel input::placeholder,
body.admin-body .admin-panel textarea::placeholder,
body.admin-body .admin-form input::placeholder,
body.admin-body .admin-form textarea::placeholder {
    color: #3a4258 !important;
}

body.admin-body .admin-panel select option,
body.admin-body .admin-form select option {
    background: #0e1118 !important;
    color: #e0e6f0 !important;
}

body.admin-body .admin-form .field-hint,
body.admin-body .admin-form-grid .field-hint {
    color: #454e64 !important;
}

/* -- BADGES -- */
body.admin-body .badge {
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

body.admin-body .badge.paid {
    background: rgba(74, 222, 128, .1) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, .2) !important;
}

body.admin-body .badge.unpaid {
    background: rgba(232, 56, 79, .1) !important;
    color: #e8384f !important;
    border: 1px solid rgba(232, 56, 79, .2) !important;
}

body.admin-body .badge.under_verification {
    background: rgba(245, 158, 11, .1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, .2) !important;
}

body.admin-body .badge.neutral {
    background: rgba(255, 255, 255, .05) !important;
    color: #8892a4 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

body.admin-body .badge.green {
    background: rgba(74, 222, 128, .1) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, .2) !important;
}

body.admin-body .badge.red {
    background: rgba(232, 56, 79, .1) !important;
    color: #e8384f !important;
    border: 1px solid rgba(232, 56, 79, .2) !important;
}

body.admin-body .badge.cyan {
    background: rgba(6, 182, 212, .1) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6, 182, 212, .2) !important;
}

body.admin-body .badge.amber {
    background: rgba(245, 158, 11, .1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, .2) !important;
}

/* -- COMPACT / MINI CARDS -- */
body.admin-body .mini-admin-card {
    background: #0e1118 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
}

body.admin-body .mini-admin-card .thumb {
    background: #0a0c12 !important;
}

body.admin-body .mini-admin-card strong {
    color: #ffffff !important;
}

body.admin-body .compact-card-head h3,
body.admin-body .compact-card-head strong {
    color: #ffffff !important;
}

body.admin-body .compact-prices span {
    color: #555e74 !important;
}

/* -- STAT CARDS -- */
body.admin-body .stat-card {
    background: #0e1118 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
}

body.admin-body .stat-text strong {
    color: #ffffff !important;
}

body.admin-body .stat-text span {
    color: #555e74 !important;
}

/* -- BAR LIST -- */
body.admin-body .bar-row {
    background: #0e1118 !important;
    color: #c8cdd8 !important;
    border: 1px solid rgba(255, 255, 255, .04) !important;
}

/* -- FIELD GROUP HEADER -- */
body.admin-body .field-group-header {
    color: #555e74 !important;
    border-bottom-color: rgba(255, 255, 255, .05) !important;
}

/* -- PERMISSION GRID -- */
body.admin-body .permission-section h4 {
    color: #ffffff !important;
}

body.admin-body .permission-grid label {
    background: #0e1118 !important;
    color: #8892a4 !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
}

/* -- TINY BUTTON -- */
body.admin-body .tiny-btn {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #8892a4 !important;
}

body.admin-body .tiny-btn:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #e0e6f0 !important;
}

body.admin-body .tiny-btn.danger {
    color: #e8384f !important;
    border-color: rgba(232, 56, 79, .2) !important;
}

/* -- INLINE EDIT -- */
body.admin-body .admin-inline-edit {
    background: #0e1118 !important;
}

body.admin-body .admin-inline-edit input,
body.admin-body .admin-inline-edit textarea {
    background: rgba(255, 255, 255, .04) !important;
    color: #e0e6f0 !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

/* -- GALLERY CARD -- */
body.admin-body .admin-gallery-card {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

/* -- PRIZE ADMIN -- */
body.admin-body .prize-admin-preview-card {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

body.admin-body .preview-copy {
    color: #555e74 !important;
}

/* -- ADMIN QUOTE PREVIEW -- */
body.admin-body .admin-quote-preview {
    color: #454e64 !important;
}

/* -- REGISTRATION VIEW -- */
body.admin-body .pro-view-card {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

body.admin-body .pro-view-card h3 {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}

body.admin-body .pro-detail-list dt {
    color: #555e74 !important;
}

body.admin-body .pro-detail-list dd {
    color: #e0e6f0 !important;
}

body.admin-body .pro-member-list .member-row {
    background: rgba(255, 255, 255, .03) !important;
    color: #e0e6f0 !important;
}

/* -- PROOF VIEW -- */
body.admin-body .proof-view-panel {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

body.admin-body .proof-image-frame {
    border-color: rgba(255, 255, 255, .06) !important;
}

/* -- TICKET VIEW -- */
body.admin-body .registration-view-panel {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

body.admin-body .pro-ticket-view {
    background: #0e1118 !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

body.admin-body .pro-ticket-hero {
    background: linear-gradient(135deg, #0e1118, #0a0c12) !important;
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}

/* -- QR OVERLAY -- */
body.admin-body .qr-overlay-card .qr-btn.scan-next {
    background: rgba(255, 255, 255, .06) !important;
    color: #e0e6f0 !important;
}

/* -- REGISTRATION EDIT FORM -- */
body.admin-body .form-actions .btn {
    min-height: 40px !important;
}

/* -- BRAND TEXT IN SIDEBAR -- */
body.admin-body .brand.has-logo .brand-text span {
    color: #ffffff !important;
}

body.admin-body .brand.has-logo .brand-text small {
    color: #555e74 !important;
}

/* -- PRICE PREVIEW (public form) -- */
body:not(.admin-body) .price-preview-wrap {
    background: rgba(232, 56, 79, .04) !important;
    border-color: rgba(232, 56, 79, .12) !important;
}

body:not(.admin-body) .price-preview {
    color: #ffffff !important;
}

/* ------------------------------------------------------------
   ADMIN LOGIN PAGE � Premium Esports Championship Theme
   ----------------------------------------------------------- */

body:not(.admin-body) .admin-login-screen {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 80px 20px 40px;
    overflow: hidden;
}

/* Background � Very dark charcoal with deep red esports atmosphere */
body:not(.admin-body) .admin-login-screen::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        /* Base dark charcoal */
        radial-gradient(ellipse at 20% 20%, #1a0d0d 0%, #0a0a0f 50%, #050508 100%),
        /* Deep red glow from top-right */
        radial-gradient(ellipse at 80% 10%, rgba(232, 56, 79, 0.15), transparent 60%),
        /* Subtle red glow from bottom-left */
        radial-gradient(ellipse at 10% 90%, rgba(212, 20, 40, 0.1), transparent 55%),
        /* Center subtle glow */
        radial-gradient(ellipse at 50% 50%, rgba(232, 56, 79, 0.05), transparent 70%);
    pointer-events: none;
}

/* Subtle diagonal neon lines � esports arena feel */
body:not(.admin-body) .admin-login-screen::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 80px,
            rgba(232, 56, 79, 0.015) 80px,
            rgba(232, 56, 79, 0.015) 81px,
            transparent 81px,
            transparent 160px),
        repeating-linear-gradient(55deg,
            transparent,
            transparent 120px,
            rgba(212, 20, 40, 0.01) 120px,
            rgba(212, 20, 40, 0.01) 121px,
            transparent 121px,
            transparent 240px);
    pointer-events: none;
    animation: neonLinesDrift 20s linear infinite;
}

@keyframes neonLinesDrift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 160px 160px, -240px -240px;
    }
}

/* Futuristic circuit/hexagonal pattern overlay */
.admin-login-screen .circuit-pattern {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0 L120 30 L120 90 L60 120 L0 90 L0 30 Z' fill='none' stroke='%23e8384f' stroke-width='0.5'/%3E%3Cpath d='M60 30 L90 45 L90 75 L60 90 L30 75 L30 45 Z' fill='none' stroke='%23e8384f' stroke-width='0.3'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Soft ambient particles */
.admin-login-screen .particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.admin-login-screen .particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 56, 79, 0.6), transparent 70%);
    animation: particleFloat 15s ease-in-out infinite;
}

.admin-login-screen .particle:nth-child(1) {
    left: 10%;
    top: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.admin-login-screen .particle:nth-child(2) {
    left: 85%;
    top: 15%;
    width: 60px;
    height: 60px;
    animation-delay: 2s;
}

.admin-login-screen .particle:nth-child(3) {
    left: 15%;
    bottom: 25%;
    width: 100px;
    height: 100px;
    animation-delay: 4s;
}

.admin-login-screen .particle:nth-child(4) {
    left: 75%;
    bottom: 15%;
    width: 70px;
    height: 70px;
    animation-delay: 6s;
}

.admin-login-screen .particle:nth-child(5) {
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    animation-delay: 8s;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }

    25% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.25;
    }

    50% {
        transform: translate(-20px, 30px) scale(0.9);
        opacity: 0.2;
    }

    75% {
        transform: translate(25px, 25px) scale(1.05);
        opacity: 0.3;
    }
}

/* Navbar override for admin login � black/near-black transparent with red accent */
body:not(.admin-body) .admin-login-screen+.nav,
body:not(.admin-body) .admin-login-screen~.nav {
    background: rgba(8, 8, 12, 0.92) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border-bottom: 1px solid rgba(232, 56, 79, 0.15) !important;
    box-shadow: 0 2px 30px rgba(232, 56, 79, 0.1) !important;
}

body:not(.admin-body) .admin-login-screen+.nav.scrolled,
body:not(.admin-body) .admin-login-screen~.nav.scrolled {
    background: rgba(6, 6, 10, 0.98) !important;
    border-bottom: 1px solid rgba(232, 56, 79, 0.2) !important;
    box-shadow: 0 4px 40px rgba(232, 56, 79, 0.15) !important;
}

/* Highlight Admin nav item */
body:not(.admin-body) .admin-login-screen~.nav .nav-links a[href*="admin_login"].active,
body:not(.admin-body) .admin-login-screen+.nav .nav-links a[href*="admin_login"].active {
    color: #ffffff !important;
    text-shadow: 0 0 16px rgba(232, 56, 79, 0.8) !important;
}

body:not(.admin-body) .admin-login-screen~.nav .nav-links a[href*="admin_login"].active::after,
body:not(.admin-body) .admin-login-screen+.nav .nav-links a[href*="admin_login"].active::after {
    background: #e8384f !important;
    box-shadow: 0 0 12px rgba(232, 56, 79, 0.9) !important;
    height: 3px !important;
}

/* Register Now button with yellow/orange accent */
body:not(.admin-body) .admin-login-screen~.nav .nav-cta,
body:not(.admin-body) .admin-login-screen+.nav .nav-cta {
    color: #0b0b0f !important;
    background: linear-gradient(135deg, #FFC107, #FF9800) !important;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3) !important;
}

/* Login card � premium esports panel */
body:not(.admin-body) .admin-login-screen .login-card {
    width: min(440px, 92vw);
    background: linear-gradient(145deg, rgba(18, 18, 24, 0.95), rgba(12, 12, 16, 0.98));
    border: 1px solid rgba(232, 56, 79, 0.18);
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow:
        0 0 0 1px rgba(232, 56, 79, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(232, 56, 79, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    position: relative;
    overflow: hidden;
}

/* Top glow accent on login card */
body:not(.admin-body) .admin-login-screen .login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e8384f, #d4a420, #e8384f, transparent);
    border-radius: 20px 20px 0 0;
    opacity: 0.6;
    animation: cardGlowPulse 3s ease-in-out infinite;
}

@keyframes cardGlowPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

/* Admin login logo � use actual NEXORA ESPORTS logo */
body:not(.admin-body) .admin-login-screen .admin-login-logo {
    display: block;
    width: 140px;
    height: auto;
    max-height: 56px;
    margin: 0 auto 20px;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(232, 56, 79, 0.3));
    transition: filter 0.3s ease;
}

body:not(.admin-body) .admin-login-screen .login-card:hover .admin-login-logo {
    filter: drop-shadow(0 6px 24px rgba(232, 56, 79, 0.5));
}

/* Fallback if no logo */
body:not(.admin-body) .admin-login-screen .brand-mark {
    width: 56px;
    height: 56px;
    font-size: 22px;
    background: linear-gradient(135deg, #e8384f, #d4a420);
    box-shadow: 0 8px 24px rgba(232, 56, 79, 0.35);
    margin-bottom: 16px;
}

/* Admin Panel eyebrow */
body:not(.admin-body) .admin-login-screen .eyebrow {
    background: rgba(232, 56, 79, 0.15) !important;
    border-color: rgba(232, 56, 79, 0.3) !important;
    color: #e8384f !important;
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
}

/* Welcome Back heading */
body:not(.admin-body) .admin-login-screen .login-card h1 {
    font-size: clamp(28px, 3.8vw, 36px);
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(232, 56, 79, 0.3);
    margin-bottom: 28px;
    letter-spacing: -0.01em;
}

/* Login fields � dark charcoal with red glow on focus */
body:not(.admin-body) .admin-login-screen .login-fields {
    display: grid;
    gap: 16px;
    margin-top: 8px;
}

body:not(.admin-body) .admin-login-screen .login-fields label {
    display: grid;
    gap: 8px;
    color: #c8c0b8;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body:not(.admin-body) .admin-login-screen .login-fields input {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    background: #0d0d12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #f0ebe8;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px transparent;
}

body:not(.admin-body) .admin-login-screen .login-fields input::placeholder {
    color: rgba(200, 192, 184, 0.4);
    font-weight: 400;
}

body:not(.admin-body) .admin-login-screen .login-fields input:hover {
    border-color: rgba(232, 56, 79, 0.3);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(232, 56, 79, 0.1);
}

body:not(.admin-body) .admin-login-screen .login-fields input:focus {
    outline: none;
    border-color: #e8384f;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(232, 56, 79, 0.15),
        0 0 20px rgba(232, 56, 79, 0.2);
    background: #0f0f14;
}

/* Login hint */
body:not(.admin-body) .admin-login-screen .login-hint {
    margin: 20px 0 0 !important;
    font-size: 12.5px;
    color: rgba(200, 192, 184, 0.5);
    line-height: 1.5;
}

/* Login button � premium esports red/crimson gradient */
body:not(.admin-body) .admin-login-screen .btn.primary.block {
    width: 100%;
    min-height: 54px;
    padding: 14px 28px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #b71c1c 0%, #e8384f 50%, #c62828 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 6px 20px rgba(232, 56, 79, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body:not(.admin-body) .admin-login-screen .btn.primary.block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 50%, #8b1515 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:not(.admin-body) .admin-login-screen .btn.primary.block:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 32px rgba(232, 56, 79, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 0 40px rgba(232, 56, 79, 0.3);
}

body:not(.admin-body) .admin-login-screen .btn.primary.block:hover::before {
    opacity: 1;
}

body:not(.admin-body) .admin-login-screen .btn.primary.block:active {
    transform: translateY(0) scale(0.98);
}

body:not(.admin-body) .admin-login-screen .btn.primary.block i {
    margin-right: 10px;
    font-size: 1.1em;
    transition: transform 0.25s ease;
}

body:not(.admin-body) .admin-login-screen .btn.primary.block:hover i {
    transform: translateX(4px);
}

/* Responsive � Mobile */
@media (max-width: 620px) {
    body:not(.admin-body) .admin-login-screen {
        padding: 72px 16px 32px;
        min-height: 100vh;
    }

    body:not(.admin-body) .admin-login-screen .login-card {
        padding: 32px 24px;
        border-radius: 16px;
    }

    body:not(.admin-body) .admin-login-screen .admin-login-logo {
        width: 120px;
        max-height: 48px;
        margin-bottom: 16px;
    }

    body:not(.admin-body) .admin-login-screen .eyebrow {
        font-size: 10px;
        padding: 4px 10px;
    }

    body:not(.admin-body) .admin-login-screen .login-card h1 {
        font-size: clamp(24px, 7vw, 30px);
        margin-bottom: 22px;
    }

    body:not(.admin-body) .admin-login-screen .login-fields {
        gap: 14px;
    }

    body:not(.admin-body) .admin-login-screen .login-fields input {
        min-height: 48px;
        padding: 0 16px;
        font-size: 15px;
    }

    body:not(.admin-body) .admin-login-screen .btn.primary.block {
        min-height: 50px;
        padding: 12px 24px;
        font-size: 14.5px;
    }

    body:not(.admin-body) .admin-login-screen .login-hint {
        font-size: 11.5px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    body:not(.admin-body) .admin-login-screen .login-card {
        padding: 28px 20px;
    }

    body:not(.admin-body) .admin-login-screen .admin-login-logo {
        width: 100px;
        max-height: 40px;
    }

    body:not(.admin-body) .admin-login-screen .login-card h1 {
        font-size: 22px;
    }

    body:not(.admin-body) .admin-login-screen .login-fields input {
        min-height: 46px;
        font-size: 14px;
    }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 1024px) {
    body:not(.admin-body) .admin-login-screen .login-card {
        padding: 36px 32px;
    }
}

/* ------------------------------------------------------------
   ABOUT US PAGE � Premium Nexora Esports Championship Arena
   One continuous dark/red environment from hero to footer.
   ----------------------------------------------------------- */

/* -- Page shell: single connected arena environment -- */
.about-page-shell {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background:
        radial-gradient(1100px 620px at 88% -8%, rgba(232, 56, 79, .12), transparent 62%),
        radial-gradient(900px 560px at -6% 28%, rgba(185, 28, 28, .08), transparent 60%),
        radial-gradient(1000px 720px at 72% 108%, rgba(232, 56, 79, .07), transparent 60%),
        linear-gradient(180deg, #07080c 0%, #0a0b10 42%, #08090e 78%, #060709 100%) !important;
}

/* Thin dark-red diagonal lines across the whole page */
.about-page-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(-55deg,
            transparent 0 110px,
            rgba(232, 56, 79, .032) 110px 111.5px,
            transparent 111.5px 220px),
        repeating-linear-gradient(35deg,
            transparent 0 170px,
            rgba(232, 56, 79, .02) 170px 171px,
            transparent 171px 340px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 30%, rgba(0, 0, 0, .75));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 30%, rgba(0, 0, 0, .75));
}

/* Faint angular hex/circuit geometry */
.about-page-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 6 L126 38 L126 102 L70 134 L14 102 L14 38 Z' fill='none' stroke='%23e8384f' stroke-width='.7'/%3E%3Cpath d='M70 40 L96 55 L96 85 L70 100 L44 85 L44 55 Z' fill='none' stroke='%23e8384f' stroke-width='.4'/%3E%3Ccircle cx='70' cy='70' r='2' fill='%23e8384f'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 78%);
}

.about-page-shell>section,
.about-page-shell>.wrap {
    position: relative;
    z-index: 1;
}

/* Neutralize per-section backgrounds so the arena stays continuous */
.about-page-shell .page-head,
.about-page-shell .section.white,
.about-page-shell .section.soft,
.about-page-shell .section {
    background: transparent !important;
    border-block: none !important;
    box-shadow: none !important;
}

.about-page-shell .section {
    padding-block: clamp(48px, 6.5vw, 92px);
}

/* -- Flowing red energy streaks (subtle current, not lightning) -- */
.about-energy-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ae-streak {
    position: absolute;
    left: -35%;
    width: 26%;
    height: 1.5px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, rgba(232, 56, 79, .65) 30%, rgba(255, 120, 132, .85) 50%, rgba(232, 56, 79, .65) 70%, transparent);
    filter: blur(.4px);
    opacity: .22;
}

.ae-1 {
    top: 16%;
    animation: aboutCurrent 11s linear infinite;
}

.ae-2 {
    top: 47%;
    width: 18%;
    opacity: .16;
    animation: aboutCurrent 15s linear infinite;
    animation-delay: -6s;
}

.ae-3 {
    top: 81%;
    width: 22%;
    opacity: .18;
    animation: aboutCurrent 13s linear infinite;
    animation-delay: -3s;
}

@keyframes aboutCurrent {
    from {
        transform: translateX(-10%);
    }

    to {
        transform: translateX(480%);
    }
}

/* -- HERO -- */
.about-page-shell .about-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(340px, 46vw, 500px);
    display: flex;
    align-items: center;
    padding: clamp(64px, 8vw, 110px) 0 clamp(48px, 6vw, 84px) !important;
    overflow: hidden;
}

/* Red neon lighting behind hero */
.about-hero-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.ahx-glow {
    position: absolute;
    right: -12%;
    top: -30%;
    width: 62%;
    height: 160%;
    background:
        radial-gradient(closest-side at 62% 42%, rgba(232, 56, 79, .20), transparent 68%),
        radial-gradient(closest-side at 40% 66%, rgba(185, 28, 28, .14), transparent 70%);
    filter: blur(6px);
}

/* Angular geometric grid, hero only */
.ahx-grid {
    position: absolute;
    inset: 0;
    opacity: .07;
    background-image:
        url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 8 L144 44 L144 116 L80 152 L16 116 L16 44 Z' fill='none' stroke='%23ff4d5f' stroke-width='.8'/%3E%3Cpath d='M80 46 L112 64 L112 96 L80 114 L48 96 L48 64 Z' fill='none' stroke='%23ff4d5f' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-position: right -30px center;
    mask-image: radial-gradient(circle at 82% 50%, #000 0%, transparent 62%);
    -webkit-mask-image: radial-gradient(circle at 82% 50%, #000 0%, transparent 62%);
}

/* Thin red glowing connector lines */
.ahx-line {
    position: absolute;
    height: 1px;
    width: 46%;
    left: -6%;
    background: linear-gradient(90deg, transparent, rgba(232, 56, 79, .55), rgba(255, 105, 118, .7), transparent);
    box-shadow: 0 0 14px rgba(232, 56, 79, .35);
}

.ahx-line-a {
    bottom: 24%;
    transform: rotate(-7deg);
}

.ahx-line-b {
    bottom: 12%;
    width: 34%;
    left: 2%;
    opacity: .6;
    transform: rotate(-7deg);
}

/* Electric streak sweeping the hero */
.ahx-current {
    position: absolute;
    top: 58%;
    left: -30%;
    width: 24%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(232, 56, 79, .8), rgba(255, 140, 150, .95), rgba(232, 56, 79, .8), transparent);
    filter: blur(.4px);
    opacity: .4;
    animation: ahxSweep 9s linear infinite;
}

@keyframes ahxSweep {
    to {
        transform: translateX(560%);
    }
}

/* Championship trophy mark � right side */
.ahx-champion {
    position: absolute;
    right: clamp(24px, 9vw, 130px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(150px, 17vw, 230px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.ahx-champion i {
    position: relative;
    z-index: 3;
    font-size: clamp(52px, 6vw, 84px);
    color: rgba(255, 208, 214, .92);
    text-shadow:
        0 0 18px rgba(232, 56, 79, .75),
        0 0 46px rgba(232, 56, 79, .45),
        0 2px 0 rgba(120, 10, 20, .55);
    animation: trophyFloat 6s ease-in-out infinite;
}

@keyframes trophyFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.ahx-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(232, 56, 79, .35);
    box-shadow: 0 0 34px rgba(232, 56, 79, .22), inset 0 0 26px rgba(232, 56, 79, .14);
}

.ahx-ring.r2 {
    inset: 13%;
    border-color: rgba(240, 192, 64, .22);
    box-shadow: 0 0 22px rgba(240, 192, 64, .12);
}

.ahx-hex {
    position: absolute;
    inset: -9%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 L91 26 L91 74 L50 97 L9 74 L9 26 Z' fill='none' stroke='%23e8384f' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Hero copy */
.about-page-shell .about-hero-inner {
    max-width: 760px;
    margin-right: auto;
}

.about-page-shell .about-hero .eyebrow {
    background: rgba(232, 56, 79, .14) !important;
    border-color: rgba(232, 56, 79, .35) !important;
    color: #ff5b6c !important;
    letter-spacing: .18em !important;
    backdrop-filter: blur(6px);
}

.about-page-shell .about-hero h1 {
    font-size: clamp(34px, 5.4vw, 64px) !important;
    line-height: 1.06 !important;
    color: #ffffff !important;
    text-shadow: 0 0 34px rgba(232, 56, 79, .35), 0 2px 18px rgba(0, 0, 0, .5);
    margin: 6px 0 18px;
}

.about-page-shell .about-hero h1 .grad-text {
    background: linear-gradient(115deg, #ff4d5f 10%, #e8384f 45%, #f0c040 95%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 18px rgba(232, 56, 79, .4));
}

.about-page-shell .about-hero .lead {
    font-size: clamp(15.5px, 1.8vw, 18.5px) !important;
    color: #aab2c0 !important;
    max-width: 640px !important;
    margin-inline: 0 !important;
}

/* -- Shared dark esports panel (story / rules / faq / contact cards) -- */
.about-page-shell .about-copy-panel,
.about-page-shell .about-contact-form.form-panel {
    position: relative;
    background: linear-gradient(155deg, rgba(23, 24, 31, .94) 0%, rgba(13, 13, 18, .97) 60%, rgba(16, 12, 14, .97) 100%) !important;
    border: 1px solid rgba(232, 56, 79, .17) !important;
    border-radius: 20px !important;
    padding: clamp(22px, 3vw, 34px) !important;
    box-shadow:
        0 26px 64px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(232, 56, 79, .05),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    overflow: hidden;
}

/* crimson top accent hairline on every panel */
.about-page-shell .about-copy-panel::before,
.about-page-shell .about-contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232, 56, 79, .75), rgba(240, 192, 64, .5), rgba(232, 56, 79, .75), transparent);
    border-radius: 99px;
    opacity: .8;
    pointer-events: none;
}

/* soft red ambient light inside panels */
.about-page-shell .about-copy-panel::after,
.about-page-shell .about-contact-form::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 55%;
    height: 90%;
    background: radial-gradient(closest-side, rgba(232, 56, 79, .08), transparent 70%);
    pointer-events: none;
}

/* Panel headings & copy */
.about-page-shell .section-heading h2,
.about-page-shell .about-copy-panel h2,
.about-page-shell .about-contact-form h2 {
    color: #ffffff !important;
    text-shadow: 0 0 26px rgba(232, 56, 79, .28);
    font-size: clamp(24px, 3vw, 36px) !important;
}

.about-page-shell .section-heading p,
.about-page-shell .lead,
.about-page-shell .about-copy-panel p {
    color: #a7adba !important;
}

.about-page-shell .eyebrow {
    background: rgba(232, 56, 79, .13) !important;
    border-color: rgba(232, 56, 79, .32) !important;
    color: #ff5b6c !important;
}

/* -- Feature / rules list rows ? dark premium rows -- */
.about-page-shell .about-feature-list,
.about-page-shell .about-rules .feature-list,
.about-page-shell .about-contact .feature-list {
    display: grid !important;
    gap: 11px !important;
    padding: 0 !important;
    background: transparent !important;
    align-content: start;
}

.about-page-shell .about-feature-list p,
.about-page-shell .about-rules .feature-list p,
.about-page-shell .about-contact .feature-list p {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, .032) !important;
    border: 1px solid rgba(232, 56, 79, .12) !important;
    border-radius: 13px !important;
    border-bottom: 1px solid rgba(232, 56, 79, .12) !important;
    color: #ccd2dd !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.about-page-shell .about-feature-list p:hover,
.about-page-shell .about-rules .feature-list p:hover,
.about-page-shell .about-contact .feature-list p:hover {
    border-color: rgba(232, 56, 79, .38) !important;
    background: rgba(232, 56, 79, .06) !important;
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(232, 56, 79, .12);
}

.about-page-shell .tick {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(232, 56, 79, .22), rgba(240, 192, 64, .14)) !important;
    border: 1px solid rgba(232, 56, 79, .4);
    color: #ff6a78 !important;
    font-size: 12px !important;
    box-shadow: 0 0 14px rgba(232, 56, 79, .25);
}

/* -- FAQ � same dark system -- */
.about-page-shell .faq-item {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(232, 56, 79, .14) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.about-page-shell .faq-item:hover {
    border-color: rgba(232, 56, 79, .36);
    box-shadow: 0 12px 32px rgba(232, 56, 79, .12);
}

.about-page-shell .faq-item[open] {
    border-color: rgba(232, 56, 79, .5);
    box-shadow: 0 14px 38px rgba(232, 56, 79, .14);
    background: rgba(232, 56, 79, .05) !important;
}

.about-page-shell .faq-item summary {
    color: #ffffff !important;
    font-weight: 600;
}

.about-page-shell .faq-item[open] summary {
    color: #ffb3bb !important;
}

.about-page-shell .faq-item summary::after {
    color: #f0c040 !important;
}

.about-page-shell .faq-item p {
    color: #a7adba !important;
}

/* -- CONTACT FORM � dark inputs, red focus -- */
.about-page-shell .about-contact-form label {
    display: grid;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #98a0af;
}

.about-page-shell .about-contact-form input,
.about-page-shell .about-contact-form textarea {
    width: 100% !important;
    min-height: 48px;
    padding: 13px 16px !important;
    background: #0c0d12 !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 12px !important;
    color: #f0f2f6 !important;
    font-family: 'Outfit', sans-serif;
    font-size: 16px !important;
    font-weight: 500;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
    box-sizing: border-box;
}

.about-page-shell .about-contact-form textarea {
    min-height: 110px;
    resize: vertical;
}

.about-page-shell .about-contact-form input::placeholder,
.about-page-shell .about-contact-form textarea::placeholder {
    color: #596074;
}

.about-page-shell .about-contact-form input:focus,
.about-page-shell .about-contact-form textarea:focus {
    outline: none !important;
    border-color: #e8384f !important;
    background: #101117 !important;
    box-shadow:
        0 0 0 3px rgba(232, 56, 79, .16),
        0 0 22px rgba(232, 56, 79, .18) !important;
}

.about-page-shell .about-contact-form h2 {
    margin-bottom: 8px;
}

.about-page-shell .about-contact-form label {
    margin-top: 16px;
}

/* Send Message button = main Nexora red CTA */
.about-page-shell .about-contact-form .btn.primary.block {
    width: 100%;
    min-height: 54px;
    margin-top: 22px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffff !important;
    background: linear-gradient(135deg, #b71c1c 0%, #e8384f 52%, #c62828 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    box-shadow:
        0 8px 24px rgba(232, 56, 79, .35),
        inset 0 1px 1px rgba(255, 255, 255, .12) !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .25s ease;
}

.about-page-shell .about-contact-form .btn.primary.block:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 14px 34px rgba(232, 56, 79, .5),
        0 0 44px rgba(232, 56, 79, .25),
        inset 0 1px 1px rgba(255, 255, 255, .16) !important;
}

.about-page-shell .about-contact-form .btn.primary.block i {
    transition: transform .25s ease;
}

.about-page-shell .about-contact-form .btn.primary.block:hover i {
    transform: translateX(4px);
}

/* -- LATEST MESSAGES -- */
.about-page-shell .review-card {
    position: relative;
    background: linear-gradient(150deg, rgba(22, 23, 30, .94), rgba(13, 13, 18, .97)) !important;
    border: 1px solid rgba(232, 56, 79, .15) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.about-page-shell .review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232, 56, 79, .6), transparent);
}

.about-page-shell .review-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 56, 79, .38) !important;
    box-shadow: 0 24px 54px rgba(232, 56, 79, .14) !important;
}

.about-page-shell .review-card strong {
    color: #fff !important;
}

.about-page-shell .review-card p {
    color: #a7adba !important;
}

.about-page-shell .avatar {
    background: linear-gradient(135deg, #e8384f, #f0c040) !important;
    box-shadow: 0 0 16px rgba(232, 56, 79, .4);
}

/* Empty state � intentional futuristic container */
.about-page-shell .empty {
    position: relative;
    padding: 52px 28px !important;
    text-align: center;
    color: #8a93a5 !important;
    font-size: 15px;
    border: 1px dashed rgba(232, 56, 79, .32) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(420px 200px at 50% 30%, rgba(232, 56, 79, .08), transparent 70%),
        rgba(255, 255, 255, .015) !important;
    box-shadow: 0 0 44px rgba(232, 56, 79, .08), inset 0 0 30px rgba(232, 56, 79, .04);
}

.about-page-shell .empty i {
    color: #ff5b6c !important;
    opacity: .85 !important;
    font-size: 36px !important;
    text-shadow: 0 0 22px rgba(232, 56, 79, .55);
}

/* -- Responsive: About page -- */
@media (max-width: 900px) {

    .about-page-shell .two-col.about-story-grid,
    .about-page-shell .two-col.about-rules-grid,
    .about-page-shell .two-col.about-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .ahx-champion {
        right: 50%;
        transform: translate(50%, -50%);
        top: auto;
        bottom: -34px;
        width: 120px;
        opacity: .5;
    }

    .about-page-shell .about-hero-inner {
        max-width: 100%;
    }
}

@media (max-width: 760px) {

    .about-page-shell .about-copy-panel,
    .about-page-shell .about-contact-form.form-panel {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .about-page-shell .section {
        padding-block: 44px 0;
    }

    .about-page-shell .about-hero {
        min-height: 0;
        padding: 52px 0 56px !important;
        text-align: center;
    }

    .about-page-shell .about-hero .lead {
        margin-inline: auto !important;
    }

    .about-page-shell .about-hero h1 {
        font-size: clamp(27px, 8vw, 38px) !important;
    }

    .about-page-shell .about-feature-list p,
    .about-page-shell .about-rules .feature-list p,
    .about-page-shell .about-contact .feature-list p {
        font-size: 13.5px !important;
        padding: 12px 13px !important;
        gap: 10px !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
    }

    .about-page-shell .tick {
        width: 22px;
        height: 22px;
        font-size: 10.5px !important;
    }

    .ae-streak,
    .ahx-line-b {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ae-streak,
    .ahx-current,
    .ahx-champion i {
        animation: none !important;
        opacity: .18;
    }
}


/* ------------------------------------------------------------
   GLOBAL FOOTER v2 � Nexora Esports Arena Baseline
   One identical footer on every page � CSS only
   ----------------------------------------------------------- */

.footer.compact-footer {
    position: relative;
    isolation: isolate;
    margin-top: 0 !important;
    padding: 20px 0 18px !important;
    background:
        radial-gradient(760px 280px at 50% 0%, rgba(232, 56, 79, .075), transparent 70%),
        linear-gradient(180deg, #0a0c12 0%, #07080d 55%, #05060a 100%) !important;
    overflow: hidden;
}

/* -- Static texture: diagonal red lines + faint horizontal circuit -- */
.footer.compact-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(-60deg,
            transparent 0 84px,
            rgba(232, 56, 79, .05) 84px 85.5px,
            transparent 85.5px 168px),
        repeating-linear-gradient(0deg,
            transparent 0 3px,
            rgba(232, 56, 79, .015) 3px 4px,
            transparent 4px 26px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35));
}

/* -- Top edge: thin static red line -- */
.footer.compact-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(232, 56, 79, .55) 25%,
            rgba(255, 110, 124, .75) 50%,
            rgba(232, 56, 79, .55) 75%,
            transparent 100%);
}

.footer.compact-footer .compact-footer-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(230px, 1fr) auto minmax(210px, 1fr);
    align-items: center;
    gap: 16px;
    padding-top: 0;
}

/* -- LEFT: brand + copyright -- */
.footer.compact-footer .footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-self: start;
}

.footer.compact-footer .brand.has-logo .brand-logo {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 0 14px rgba(232, 56, 79, .3));
    transition: filter .3s ease;
}

.footer.compact-footer .brand:hover .brand-logo {
    filter: drop-shadow(0 0 20px rgba(232, 56, 79, .55));
}

.footer.compact-footer .brand-mark {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 11px !important;
}

.footer.compact-footer .brand-text span {
    color: #fff !important;
    font-weight: 800 !important;
}

.footer.compact-footer .brand-text small {
    color: #ff5b6c !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 9px !important;
}

.footer.compact-footer .footer-copyright {
    font-size: 12.5px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .4);
    white-space: nowrap;
}

/* -- CENTER: navigation -- */
.footer.compact-footer .footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 30px);
    justify-self: center;
}

.footer.compact-footer .footer-center a {
    position: relative;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    transition: color .22s ease, text-shadow .22s ease;
}

.footer.compact-footer .footer-center a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, #e8384f, #ff6a78);
    box-shadow: 0 0 10px rgba(232, 56, 79, .7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.footer.compact-footer .footer-center a:hover {
    color: #ff5b6c;
    text-shadow: 0 0 14px rgba(232, 56, 79, .55);
}

.footer.compact-footer .footer-center a:hover::after {
    transform: scaleX(1);
}

.footer.compact-footer .footer-center a.footer-register-link {
    color: #ff5b6c !important;
    font-weight: 800;
}

.footer.compact-footer .footer-center a.footer-register-link::after {
    transform: scaleX(1);
    opacity: .85;
}

/* -- RIGHT: social buttons -- */
.footer.compact-footer .footer-social-mini {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    justify-self: end;
}

.footer.compact-footer .footer-social-mini a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .72);
    font-size: 14.5px;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .22s ease,
        border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.footer.compact-footer .footer-social-mini a:hover {
    transform: translateY(-3px);
    background: rgba(232, 56, 79, .16);
    border-color: rgba(232, 56, 79, .55);
    color: #ff6a78;
    box-shadow:
        0 0 20px rgba(232, 56, 79, .4),
        inset 0 0 12px rgba(232, 56, 79, .12);
}

/* -- Tablet: two comfortable rows -- */
@media (max-width: 900px) and (min-width: 769px) {
    .footer.compact-footer .compact-footer-inner {
        grid-template-columns: 1fr auto;
        row-gap: 20px;
    }

    .footer.compact-footer .footer-center {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* -- Mobile: clean centered stack -- */
@media (max-width: 768px) {
    .footer.compact-footer {
        padding: 16px 0 14px !important;
    }

    .footer.compact-footer .compact-footer-inner {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .footer.compact-footer .footer-left {
        align-items: center;
    }

    .footer.compact-footer .footer-copyright {
        white-space: normal;
    }

    .footer.compact-footer .footer-center {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
        max-width: 340px;
    }

    .footer.compact-footer .footer-social-mini {
        justify-content: center;
    }
}


/* ---------------------------------------------------------------
   NEXORA ADMIN v2 � PREMIUM ESPORTS DASHBOARD (final cascade pass)
   Scoped to body.admin-body � Registrations-focused � CSS only
   --------------------------------------------------------------- */

/* -- A. ARENA BACKGROUND: LED current-flow ----------------------- */
body.admin-body {
    background-color: #05070b !important;
}

body.admin-body::before {
    background:
        repeating-linear-gradient(90deg, rgba(232, 56, 79, .008) 0 1px, transparent 1px 190px),
        repeating-linear-gradient(0deg, rgba(232, 56, 79, .006) 0 1px, transparent 1px 190px),
        repeating-linear-gradient(-55deg, transparent 0 90px, rgba(232, 56, 79, .022) 90px 91px, transparent 91px 210px),
        repeating-linear-gradient(-55deg, transparent 0 260px, rgba(232, 56, 79, .014) 260px 261px, transparent 261px 460px),
        linear-gradient(115deg, transparent 40%, rgba(232, 56, 79, .02) 50%, transparent 60%),
        radial-gradient(ellipse 1000px 720px at 12% 30%, rgba(232, 56, 79, .055), transparent 65%),
        radial-gradient(ellipse 900px 640px at 88% 75%, rgba(232, 56, 79, .04), transparent 62%),
        radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(2, 3, 6, .6) 100%) !important;
}

/* flowing LED streaks layer */
body.admin-body::after {
    content: '' !important;
    position: fixed !important;
    inset: -10% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: .55 !important;
    background:
        repeating-linear-gradient(64deg, transparent 0 140px, rgba(232, 56, 79, .05) 140px 141px, rgba(232, 56, 79, .10) 143px, transparent 146px 300px),
        repeating-linear-gradient(64deg, transparent 0 420px, rgba(255, 77, 100, .03) 420px 421px, transparent 422px 700px) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
    animation: nxLedFlow 26s linear infinite !important;
}

@keyframes nxLedFlow {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 600px 0, -900px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.admin-body::after {
        animation: none !important;
    }
}

/* -- B. SIDEBAR � premium control panel -------------------------- */
body.admin-body .admin-side,
body.admin-body aside.admin-side {
    background:
        radial-gradient(120% 40% at 0% 0%, rgba(232, 56, 79, .07), transparent 60%),
        radial-gradient(120% 35% at 0% 100%, rgba(232, 56, 79, .05), transparent 60%),
        linear-gradient(180deg, #0a0d13 0%, #070910 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}

/* animated crimson LED edge */
body.admin-body .admin-side::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: -1px !important;
    width: 2px !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(232, 56, 79, .45) 30%, rgba(255, 77, 100, .8) 50%, rgba(232, 56, 79, .45) 70%, transparent 100%) !important;
    animation: nxSidePulse 4.5s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes nxSidePulse {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

body.admin-body .admin-side-head {
    padding: 20px 16px 16px !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(90deg, rgba(232, 56, 79, .35), rgba(255, 255, 255, .06) 55%, transparent) 1 !important;
}

body.admin-body .brand-logo {
    display: block !important;
    height: 46px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
}

body.admin-body .admin-topbar .brand-logo {
    height: 36px !important;
    max-width: 150px !important;
}

body.admin-body .brand-mark {
    width: 44px !important;
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
}

body.admin-body .brand-text span {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
}

body.admin-body .brand-text small {
    color: #e8384f !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 9.5px !important;
}

body.admin-body .side-label {
    color: #ff4d64 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    padding: 20px 14px 7px !important;
}

body.admin-body .admin-side-nav a:not(.brand) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 2px 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #93a0b4 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    border: 1px solid transparent !important;
    transition: all .22s ease !important;
}

body.admin-body .admin-side-nav a:not(.brand) i {
    width: 22px !important;
    text-align: center !important;
    margin-right: 11px !important;
    font-size: 14.5px !important;
    color: #6b7891 !important;
    transition: color .22s ease !important;
}

body.admin-body .admin-side-nav a:not(.brand):hover {
    background: rgba(232, 56, 79, .09) !important;
    border-color: rgba(232, 56, 79, .18) !important;
    color: #e9edf5 !important;
}

body.admin-body .admin-side-nav a:not(.brand):hover i {
    color: #ff4d64 !important;
}

/* ACTIVE = crimson LED item (kills legacy yellow/orange gradient) */
body.admin-body .admin-side-nav a.active,
body.admin-body .admin-side-nav a:not(.brand).active,
body.admin-body .admin-side-nav a[class*="active"] {
    background: linear-gradient(135deg, rgba(232, 56, 79, .32), rgba(158, 20, 40, .55)) !important;
    border-color: rgba(255, 77, 100, .55) !important;
    color: #ffffff !important;
    box-shadow:
        inset 3px 0 0 #ff4d64,
        0 0 18px rgba(232, 56, 79, .28),
        0 0 42px rgba(232, 56, 79, .12) !important;
    text-shadow: 0 0 12px rgba(255, 77, 100, .35) !important;
}

body.admin-body .admin-side-nav a.active i,
body.admin-body .admin-side-nav a:not(.brand).active i {
    color: #ff5d75 !important;
    text-shadow: 0 0 10px rgba(255, 77, 100, .6) !important;
}

body.admin-body .admin-side-nav .logout {
    margin-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 0 0 10px 10px !important;
    color: #7c88a0 !important;
}

/* -- C. PAGE HEADER ---------------------------------------------- */
body.admin-body .admin-head .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 14px !important;
    border: 1px solid rgba(255, 77, 100, .45) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(232, 56, 79, .16), rgba(232, 56, 79, .05)) !important;
    color: #ff5d75 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 16px rgba(232, 56, 79, .18) !important;
}

body.admin-body .admin-head h1 {
    color: #ffffff !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    margin-top: 10px !important;
    text-shadow: 0 2px 24px rgba(232, 56, 79, .15) !important;
}

body.admin-body .admin-head p {
    color: #93a0b4 !important;
}

body.admin-body .admin-head p strong {
    color: #facc15 !important;
}

/* -- D. PANEL SHELL ---------------------------------------------- */
body.admin-body .admin-panel {
    background: linear-gradient(180deg, #10141c 0%, #0c0f16 100%) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03), 0 0 80px rgba(232, 56, 79, .04) !important;
}

body.admin-body .admin-panel>h2 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
}

body.admin-body .admin-panel>h2 i {
    color: #ff4d64 !important;
}

/* -- E. FILTER PANEL � strict grid, ZERO overlap ----------------- */
body.admin-body .filter-bar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px 14px !important;
    align-items: end !important;
    padding: 18px !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 0 40px rgba(232, 56, 79, .03) !important;
}

body.admin-body .filter-bar label {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #93a0b4 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
}

body.admin-body .filter-bar .field-hint {
    color: #4d5872 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
}

body.admin-body .filter-bar input,
body.admin-body .filter-bar select {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    background: #0a0d13 !important;
    color: #e7ecf5 !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color-scheme: dark !important;
    transition: border-color .2s, box-shadow .2s !important;
}

body.admin-body .filter-bar input::placeholder {
    color: #46506a !important;
    opacity: 1 !important;
}

body.admin-body .filter-bar select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237c88a0' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    padding-right: 34px !important;
}

body.admin-body .filter-bar select option {
    background: #10141c !important;
    color: #e7ecf5 !important;
}

body.admin-body .filter-bar input:focus,
body.admin-body .filter-bar select:focus {
    outline: none !important;
    border-color: #ff4d64 !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .16), 0 0 18px rgba(232, 56, 79, .12) !important;
}

/* actions occupy the last two cells of row 2 */
body.admin-body .filter-actions {
    grid-column: 4 / -1 !important;
    display: flex !important;
    align-items: end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

@media (max-width: 1180px) {
    body.admin-body .filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.admin-body .filter-actions {
        grid-column: auto / span 3 !important;
    }
}

@media (max-width: 760px) {
    body.admin-body .filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-body .filter-actions {
        grid-column: 1 / -1 !important;
    }

    body.admin-body .filter-actions .btn {
        flex: 1 1 calc(50% - 5px) !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    body.admin-body .filter-bar {
        grid-template-columns: 1fr !important;
    }
}

/* -- F. BUTTON SYSTEM -------------------------------------------- */
body.admin-body .btn {
    position: relative !important;
    min-height: 42px !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    gap: 8px !important;
}

body.admin-body .btn.small {
    min-height: 38px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
}

body.admin-body .btn.primary {
    background: linear-gradient(135deg, #ff2d52, #b3123a) !important;
    border: 1px solid rgba(255, 77, 100, .5) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(232, 56, 79, .35), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

body.admin-body .btn.primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(232, 56, 79, .5) !important;
}

body.admin-body .btn.outline,
body.admin-body .filter-actions .btn.outline,
body.admin-body .result-summary .btn.outline {
    background: #12161f !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    color: #c3ccdc !important;
    transition: all .18s ease !important;
}

body.admin-body .btn.outline:hover {
    border-color: rgba(255, 77, 100, .45) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(232, 56, 79, .18) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .btn.warning {
    background: linear-gradient(135deg, #facc15, #eab308) !important;
    color: #1c1917 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(250, 204, 21, .25) !important;
}

body.admin-body .btn.success {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, .25) !important;
}

body.admin-body .btn.danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, .25) !important;
}

/* -- G. SUMMARY + EXPORT ROW ------------------------------------- */
body.admin-body .result-summary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    padding: 14px 2px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    color: #93a0b4 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.admin-body .result-summary strong {
    color: #fff !important;
    font-size: 17px !important;
}

body.admin-body .dot-paid,
body.admin-body .dot-unpaid,
body.admin-body .dot-verification {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.admin-body .dot-paid {
    background: rgba(34, 197, 94, .10) !important;
    border: 1px solid rgba(34, 197, 94, .3) !important;
    color: #4ade80 !important;
}

body.admin-body .dot-unpaid {
    background: rgba(232, 56, 79, .10) !important;
    border: 1px solid rgba(232, 56, 79, .3) !important;
    color: #ff5d75 !important;
}

body.admin-body .dot-verification {
    background: rgba(250, 204, 21, .10) !important;
    border: 1px solid rgba(250, 204, 21, .35) !important;
    color: #fde047 !important;
}

body.admin-body .dot-paid::before,
body.admin-body .dot-unpaid::before,
body.admin-body .dot-verification::before {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 8px currentColor !important;
}

body.admin-body .result-summary .btn.primary[style] {
    margin-left: auto !important;
}

/* -- H. GAME TABS ------------------------------------------------ */
body.admin-body .game-registration-tabs {
    gap: 8px !important;
    padding: 2px 0 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

body.admin-body .game-registration-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    background: #12161f !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #aab4c6 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    transition: all .2s ease !important;
}

body.admin-body .game-registration-tab span {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #0a0d13 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #93a0b4 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}

body.admin-body .game-registration-tab:hover {
    border-color: rgba(255, 77, 100, .4) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(232, 56, 79, .15) !important;
}

body.admin-body .game-registration-tab.active {
    background: linear-gradient(135deg, #ff2d52, #b3123a) !important;
    border-color: rgba(255, 77, 100, .6) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(232, 56, 79, .4) !important;
}

body.admin-body .game-registration-tab.active span {
    background: rgba(255, 255, 255, .18) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* -- I. TABLE � hierarchy & status identity ---------------------- */
body.admin-body .admin-table-wrap {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    background: #0a0d13 !important;
}

body.admin-body .admin-table-wrap table {
    min-width: 1080px !important;
}

body.admin-body .admin-table-wrap th {
    padding: 13px 16px !important;
    background: #10141c !important;
    color: #7c88a0 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.1px !important;
    border-bottom: 2px solid #8b1a1a !important;
}

body.admin-body .admin-table-wrap td {
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .045) !important;
    color: #c3ccdc !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    overflow-wrap: anywhere !important;
}

body.admin-body .admin-table-wrap td strong {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

body.admin-body .admin-table-wrap td small {
    display: block !important;
    color: #66738c !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
    line-height: 1.45 !important;
}

body.admin-body .game-registration-row {
    transition: background .15s ease !important;
}

body.admin-body .game-registration-row:hover>td {
    background: rgba(255, 255, 255, .028) !important;
}

/* STATUS ROWS � gold vs green vs crimson, unmistakable */
body.admin-body .game-registration-table tr.row-under_verification>td {
    background: rgba(250, 204, 21, .075) !important;
    box-shadow: inset 3px 0 0 #facc15 !important;
}

body.admin-body .game-registration-table tr.row-under_verification td strong {
    color: #fde047 !important;
}

body.admin-body .game-registration-table tr.row-paid>td {
    background: rgba(34, 197, 94, .075) !important;
    box-shadow: inset 3px 0 0 #22c55e !important;
}

body.admin-body .game-registration-table tr.row-paid td strong {
    color: #86efac !important;
}

body.admin-body .game-registration-table tr.row-unpaid>td {
    background: rgba(232, 56, 79, .075) !important;
    box-shadow: inset 3px 0 0 #e8384f !important;
}

body.admin-body .game-registration-table tr.row-unpaid td strong {
    color: #ff8296 !important;
}

/* badges */
body.admin-body .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    letter-spacing: .3px !important;
}

body.admin-body .badge.paid,
body.admin-body .badge.green {
    background: rgba(34, 197, 94, .12) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, .35) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, .12) !important;
}

body.admin-body .badge.unpaid,
body.admin-body .badge.red {
    background: rgba(232, 56, 79, .12) !important;
    color: #ff5d75 !important;
    border: 1px solid rgba(232, 56, 79, .35) !important;
    box-shadow: 0 0 12px rgba(232, 56, 79, .12) !important;
}

body.admin-body .badge.under_verification,
body.admin-body .badge.amber {
    background: rgba(250, 204, 21, .14) !important;
    color: #fde047 !important;
    border: 1px solid rgba(250, 204, 21, .45) !important;
    box-shadow: 0 0 14px rgba(250, 204, 21, .18) !important;
}

body.admin-body .badge.neutral {
    background: rgba(255, 255, 255, .06) !important;
    color: #aab4c6 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
}

/* payment cell */
body.admin-body .inline-payment-form select {
    height: 34px !important;
    min-width: 150px !important;
    padding: 0 30px 0 12px !important;
    background-color: #0e1220 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 9px !important;
    color: #e7ecf5 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    appearance: none !important;
    color-scheme: dark !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237c88a0' d='M1.5 3l3.5 4 3.5-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}

body.admin-body .inline-payment-form select:focus {
    outline: none !important;
    border-color: #ff4d64 !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .15) !important;
}

body.admin-body .remaining-value {
    color: #facc15 !important;
    font-weight: 700 !important;
}

/* check-in chips */
body.admin-body .checkin-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.admin-body .checkin-chip.ci-in {
    background: rgba(34, 197, 94, .12) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, .35) !important;
}

body.admin-body .checkin-chip.ci-rej {
    background: rgba(185, 28, 28, .16) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, .45) !important;
}

body.admin-body .checkin-chip.ci-wait {
    background: rgba(250, 204, 21, .08) !important;
    color: #d3b94a !important;
    border: 1px solid rgba(250, 204, 21, .25) !important;
}

/* -- J. OPTIONS � 2�N action grid, never overlaps ---------------- */
body.admin-body .registration-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(84px, 1fr)) !important;
    gap: 6px !important;
    min-width: 184px !important;
    max-width: 220px !important;
}

body.admin-body .registration-options .mini-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: #12161f !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #c3ccdc !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: all .18s ease !important;
}

body.admin-body .registration-options .mini-action i {
    font-size: 11px !important;
}

body.admin-body .registration-options .mini-action:nth-child(1) {
    border-color: rgba(96, 165, 250, .35) !important;
    color: #93c5fd !important;
}

body.admin-body .registration-options .mini-action:nth-child(2) {
    border-color: rgba(250, 204, 21, .35) !important;
    color: #fde047 !important;
}

body.admin-body .registration-options .mini-action:nth-child(3) {
    border-color: rgba(232, 56, 79, .4) !important;
    color: #ff5d75 !important;
}

body.admin-body .registration-options .mini-action:nth-child(4) {
    border-color: rgba(148, 163, 184, .35) !important;
    color: #cbd5e1 !important;
}

body.admin-body .registration-options .mini-action:nth-child(1):hover {
    background: rgba(96, 165, 250, .12) !important;
    box-shadow: 0 0 12px rgba(96, 165, 250, .2) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .registration-options .mini-action:nth-child(2):hover {
    background: rgba(250, 204, 21, .12) !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, .2) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .registration-options .mini-action:nth-child(3):hover {
    background: rgba(232, 56, 79, .14) !important;
    box-shadow: 0 0 12px rgba(232, 56, 79, .25) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .registration-options .mini-action:nth-child(4):hover {
    background: rgba(148, 163, 184, .12) !important;
    box-shadow: 0 0 12px rgba(148, 163, 184, .2) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .mini-action:disabled {
    opacity: .5 !important;
    cursor: wait !important;
    transform: none !important;
}

/* panel heading inside game panels */
body.admin-body .game-panel-heading .eyebrow {
    color: #ff4d64 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
}

body.admin-body .game-panel-heading h2 {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

body.admin-body .game-panel-heading>span {
    color: #66738c !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* ajax toast */
body.admin-body .ajax-feedback {
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4) !important;
}

/* mobile table scroll hint */
@media (max-width: 1120px) {
    body.admin-body .admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}



/* ------------------------------------------------------------
   GALLERY BACKGROUND � FULL REPLACEMENT (v2)
   Kills every legacy gallery background layer, then paints one
   continuous dark-futuristic arena with LIVE electric currents.
   Background-only: no layout/content/card/nav/footer changes.
   ------------------------------------------------------------ */

/* -- 1) KILL LEGACY GALLERY BACKGROUNDS ----------------------
   Higher specificity than the old body:not(.admin-body) rules
   and later in the cascade � these win decisively. */
body:not(.admin-body) .gallery-page-shell .gallery-page-head,
body:not(.admin-body) .gallery-page-shell .gallery-page-section,
body:not(.admin-body) .gallery-page-shell section.page-head,
body:not(.admin-body) .gallery-page-shell section.section {
    background: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body:not(.admin-body) .gallery-page-shell .gallery-page-head::before,
body:not(.admin-body) .gallery-page-shell .gallery-page-head::after,
body:not(.admin-body) .gallery-page-shell .gallery-page-section::before,
body:not(.admin-body) .gallery-page-shell .gallery-page-section::after {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
}

/* -- 2) SHELL � deep black base + navy depth + red atmosphere -- */
.gallery-page-shell {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background:
        radial-gradient(1100px 600px at 82% -10%, rgba(232, 56, 79, .09), transparent 60%),
        radial-gradient(900px 560px at -10% 30%, rgba(160, 24, 40, .06), transparent 58%),
        radial-gradient(1200px 700px at 50% 112%, rgba(16, 28, 62, .42), transparent 66%),
        radial-gradient(820px 480px at 100% 68%, rgba(18, 32, 70, .34), transparent 62%),
        linear-gradient(180deg, #050609 0%, #080a0f 48%, #06080d 80%, #04050a 100%) !important;
}

/* Very subtle futuristic circuit micro-texture (no heavy diagonals) */
.gallery-page-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M90 6 L166 50 L166 130 L90 174 L14 130 L14 50 Z' fill='none' stroke='%23e8384f' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M90 44 L132 68 L132 112 L90 136 L48 112 L48 68 Z' fill='none' stroke='%232e427a' stroke-opacity='.10' stroke-width='.5'/%3E%3Cpath d='M14 50 L48 68 M166 50 L132 68 M14 130 L48 112 M166 130 L132 112' stroke='%23e8384f' stroke-opacity='.05' stroke-width='.5'/%3E%3Ccircle cx='90' cy='90' r='1.4' fill='%23ff4d5f' fill-opacity='.16'/%3E%3Ccircle cx='48' cy='68' r='1' fill='%235b74b8' fill-opacity='.12'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .7));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .7));
}

/* Soft dark vignette to keep content contrast high */
.gallery-page-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 4, 7, .55) 0%, transparent 18%, transparent 82%, rgba(3, 4, 7, .5) 100%),
        radial-gradient(120% 60% at 50% 42%, transparent 55%, rgba(3, 4, 7, .38) 100%);
}

.gallery-page-shell>section {
    position: relative;
    z-index: 2;
}

/* -- 3) LIVE ELECTRIC CURRENT SYSTEM -------------------------
   Conduit = static dim path (the wire).
   Pulse   = bright comet traveling along it (the current).   */
.gallery-fx-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.gx-conduit {
    position: absolute;
    left: -8%;
    width: 116%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(232, 56, 79, .16) 10%,
            rgba(232, 56, 79, .09) 45%,
            rgba(232, 56, 79, .15) 85%,
            transparent 100%);
}

.gx-c1 {
    top: 13%;
    transform: rotate(-2deg);
}

.gx-c2 {
    top: 34%;
    transform: rotate(1.5deg);
}

.gx-c3 {
    top: 56%;
    transform: rotate(-1deg);
}

.gx-c4 {
    top: 78%;
    transform: rotate(2deg);
}

.gx-c5.diag {
    top: 24%;
    height: 1px;
    transform: rotate(-7deg);
    transform-origin: left center;
}

.gx-pulse {
    position: absolute;
    top: -.5px;
    left: 0;
    width: 190px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(232, 56, 79, .35) 22%,
            rgba(255, 84, 102, .95) 55%,
            #ffc9d1 72%,
            rgba(255, 84, 102, .95) 86%,
            transparent 100%);
    box-shadow:
        0 0 9px rgba(255, 70, 92, .75),
        0 0 24px rgba(232, 56, 79, .4),
        0 0 52px rgba(232, 56, 79, .22);
    opacity: 0;
    animation: gxTravel var(--pd, 11s) linear infinite;
    animation-delay: var(--pdel, 0s);
    will-change: transform, opacity;
}

@keyframes gxTravel {
    0% {
        transform: translateX(-16vw);
        opacity: 0;
    }

    7% {
        opacity: .95;
    }

    20% {
        opacity: .55;
    }

    26% {
        opacity: 1;
    }

    29% {
        opacity: .45;
    }

    /* glow flicker */
    33% {
        opacity: .95;
    }

    52% {
        opacity: .5;
    }

    64% {
        opacity: .9;
    }

    78% {
        opacity: .35;
    }

    88% {
        opacity: .6;
    }

    96% {
        opacity: 0;
    }

    100% {
        transform: translateX(108vw);
        opacity: 0;
    }
}

/* per-conduit pulse timing � areas activate at different moments */
.gx-c1 .gx-pulse {
    --pd: 11s;
    --pdel: 0s;
}

.gx-c1 .gx-pulse.p2 {
    --pd: 15s;
    --pdel: -7s;
    width: 140px;
    opacity: 0;
    filter: brightness(.8);
}

.gx-c2 .gx-pulse {
    --pd: 13s;
    --pdel: -4s;
}

.gx-c3 .gx-pulse.p2 {
    --pd: 12s;
    --pdel: -2s;
}

.gx-c3 .gx-pulse.p3 {
    --pd: 17s;
    --pdel: -11s;
    width: 130px;
    filter: brightness(.75);
}

.gx-c4 .gx-pulse {
    --pd: 14s;
    --pdel: -8s;
}

.gx-c5.diag .gx-pulse {
    --pd: 10s;
    --pdel: -5s;
    width: 170px;
}

/* Occasional tiny red particles drifting off the grid */
.gx-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 134, .95), rgba(232, 56, 79, .35) 60%, transparent 75%);
    box-shadow: 0 0 8px rgba(232, 56, 79, .6);
    opacity: 0;
    animation: gxSpark var(--sp-dur, 9s) ease-in-out infinite;
    animation-delay: var(--sp-delay, 0s);
}

@keyframes gxSpark {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(.6);
    }

    12% {
        opacity: .8;
    }

    30% {
        opacity: .25;
        transform: translateY(-14px) scale(1);
    }

    44% {
        opacity: .65;
    }

    60% {
        opacity: 0;
        transform: translateY(-30px) scale(.5);
    }
}

.gx-s1 {
    left: 12%;
    top: 20%;
    --sp-dur: 8s;
    --sp-delay: 1s;
}

.gx-s2 {
    left: 84%;
    top: 29%;
    --sp-dur: 11s;
    --sp-delay: 4s;
}

.gx-s3 {
    left: 31%;
    top: 52%;
    --sp-dur: 9s;
    --sp-delay: 2.5s;
}

.gx-s4 {
    left: 71%;
    top: 71%;
    --sp-dur: 12s;
    --sp-delay: 6s;
}

.gx-s5 {
    left: 49%;
    top: 10%;
    --sp-dur: 10s;
    --sp-delay: 7s;
}

.gx-s6 {
    left: 90%;
    top: 62%;
    --sp-dur: 8.5s;
    --sp-delay: 5s;
}

/* -- 4) READABILITY GUARDS (background-only) -- */
.gallery-page-shell .gallery-page-head h1 {
    text-shadow: 0 0 36px rgba(232, 56, 79, .28), 0 2px 18px rgba(0, 0, 0, .65);
}

.gallery-page-shell .empty {
    background:
        radial-gradient(420px 200px at 50% 30%, rgba(232, 56, 79, .06), transparent 70%),
        rgba(8, 10, 16, .6) !important;
    border-color: rgba(232, 56, 79, .28) !important;
    color: #98a0af !important;
}

/* -- 5) MOBILE + MOTION SAFETY -- */
@media (max-width: 768px) {

    .gx-c4,
    .gx-c5.diag,
    .gx-spark[style],
    .gx-s5,
    .gx-s6 {
        display: none;
    }

    .gx-pulse {
        width: 130px;
    }

    .gx-pulse,
    .gx-conduit {
        will-change: auto;
    }

    .gx-conduit .gx-pulse {
        box-shadow: 0 0 7px rgba(255, 70, 92, .6), 0 0 18px rgba(232, 56, 79, .3);
    }
}

@media (prefers-reduced-motion: reduce) {

    .gx-pulse,
    .gx-spark {
        animation: none !important;
        opacity: .12;
    }
}


/* ------------------------------------------------------------
   ABOUT US � MOBILE-ONLY POLISH (=768px)
   Desktop untouched. Fixes spacing rhythm, hero composition,
   panel/tile compactness, and softens background on phones.
   ------------------------------------------------------------ */
@media (max-width: 768px) {

    /* -- Mobile container: comfortable side gutters -- */
    .about-page-shell .wrap {
        padding-left: 19px !important;
        padding-right: 19px !important;
    }

    /* -- Consistent vertical rhythm between sections -- */
    .about-page-shell .section {
        padding-top: 46px !important;
        padding-bottom: 46px !important;
    }

    .about-page-shell .about-community {
        padding-bottom: 56px !important;
    }

    /* -- HERO -- */
    .about-page-shell .about-hero {
        min-height: 0 !important;
        padding: 54px 0 62px !important;
        text-align: center;
        overflow: hidden;
    }

    .about-page-shell .about-hero-inner {
        max-width: 100% !important;
        margin-inline: auto !important;
        position: relative;
        z-index: 2;
    }

    .about-page-shell .about-hero .eyebrow {
        margin-bottom: 14px !important;
    }

    .about-page-shell .about-hero h1 {
        font-size: clamp(25px, 7.2vw, 31px) !important;
        line-height: 1.22 !important;
        margin: 0 auto 16px !important;
        max-width: 20ch;
        overflow-wrap: break-word;
    }

    .about-page-shell .about-hero h1 .grad-text {
        display: inline;
    }

    .about-page-shell .about-hero .lead {
        font-size: 14.5px !important;
        line-height: 1.68 !important;
        max-width: 34ch !important;
        margin-inline: auto !important;
    }

    /* Trophy: small, low, pinned to the right edge � never over text */
    .ahx-champion {
        width: 88px !important;
        top: auto !important;
        right: -16px !important;
        bottom: 6px !important;
        left: auto !important;
        transform: none !important;
        opacity: .3 !important;
        pointer-events: none;
    }

    .ahx-champion i {
        font-size: 34px !important;
    }

    .ahx-champion .ahx-ring.r2 {
        inset: 15%;
    }

    /* Softer background presence so content leads */
    .about-page-shell::before {
        opacity: .32;
    }

    .ahx-grid {
        opacity: .5 !important;
    }

    .ahx-glow {
        opacity: .65;
    }

    .ahx-line-a {
        opacity: .45;
    }

    .ae-streak {
        display: none !important;
    }

    .about-energy-layer {
        display: none !important;
    }

    /* -- PANELS (Story / Rules / FAQ / Contact) -- */
    .about-page-shell .about-copy-panel,
    .about-page-shell .about-contact-form.form-panel {
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    .about-page-shell .section-heading {
        margin-bottom: 18px !important;
    }

    .about-page-shell .section-heading .eyebrow,
    .about-page-shell .eyebrow {
        font-size: 10px !important;
        padding: 4px 11px !important;
        letter-spacing: .16em !important;
    }

    .about-page-shell .section-heading h2,
    .about-page-shell .about-copy-panel h2,
    .about-page-shell .about-contact-form h2 {
        font-size: clamp(19px, 5.4vw, 23px) !important;
        line-height: 1.24 !important;
        overflow-wrap: break-word;
    }

    .about-page-shell .section-heading p,
    .about-page-shell .lead,
    .about-page-shell .about-copy-panel p {
        font-size: 13.5px !important;
        line-height: 1.66 !important;
    }

    .about-page-shell .about-copy-panel .lead {
        margin-bottom: 12px !important;
    }

    /* -- FEATURE TILES � compact premium rows -- */
    .about-page-shell .about-feature-list,
    .about-page-shell .about-rules .feature-list,
    .about-page-shell .about-contact .feature-list {
        gap: 8px !important;
    }

    .about-page-shell .about-feature-list p,
    .about-page-shell .about-rules .feature-list p,
    .about-page-shell .about-contact .feature-list p {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: 12.75px !important;
        line-height: 1.52 !important;
        transform: none !important;
    }

    .about-page-shell .tick {
        width: 21px !important;
        height: 21px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
    }

    /* -- FAQ -- */
    .about-page-shell .faq-item summary {
        font-size: 13.75px !important;
        padding: 14px 14px !important;
        padding-right: 38px !important;
    }

    .about-page-shell .faq-item summary::after {
        right: 14px !important;
    }

    .about-page-shell .faq-item p {
        font-size: 12.75px !important;
        padding: 0 14px 14px !important;
        line-height: 1.6 !important;
    }

    /* -- CONTACT FORM -- */
    .about-page-shell .about-contact-form label {
        font-size: 10.75px !important;
        margin-top: 14px !important;
    }

    .about-page-shell .about-contact-form input,
    .about-page-shell .about-contact-form textarea {
        min-height: 46px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
        border-radius: 11px !important;
    }

    .about-page-shell .about-contact-form textarea {
        min-height: 96px !important;
    }

    .about-page-shell .about-contact-form .btn.primary.block {
        min-height: 50px !important;
        margin-top: 18px !important;
        font-size: 13.5px !important;
    }

    /* -- LATEST MESSAGES -- */
    .about-page-shell .review-card {
        padding: 16px 15px !important;
    }

    .about-page-shell .empty {
        padding: 42px 18px !important;
        font-size: 13.5px !important;
    }

    /* -- Overflow safety -- */
    .about-page-shell {
        overflow-x: hidden !important;
    }

    .about-page-shell img {
        max-width: 100%;
    }
}

/* Extra-small phones (360px class) */
@media (max-width: 374px) {
    .about-page-shell .wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .about-page-shell .about-hero h1 {
        font-size: 24px !important;
    }

    .about-page-shell .about-copy-panel,
    .about-page-shell .about-contact-form.form-panel {
        padding: 19px 15px !important;
    }

    .ahx-champion {
        width: 74px !important;
        opacity: .26 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   NEXORA ADMIN — GAMES PAGE PREMIUM PASS (form + game cards)
   CSS only · scoped body.admin-body · zero logic changes
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ADD NEW GAME FORM ─────────────────────────────────────── */
body.admin-body .admin-form {
    gap: 13px !important;
}

body.admin-body .admin-form label {
    gap: 6px !important;
}

body.admin-body .admin-form input,
body.admin-body .admin-form select,
body.admin-body .admin-form textarea {
    height: 42px !important;
    box-sizing: border-box !important;
    color-scheme: dark !important;
}

body.admin-body .admin-form input[type="file"] {
    padding: 8px 10px !important;
    height: auto !important;
    cursor: pointer !important;
}

body.admin-body .admin-form input[type="file"]::file-selector-button {
    margin-right: 12px !important;
    padding: 7px 14px !important;
    border: 1px solid rgba(255, 77, 100, .4) !important;
    border-radius: 8px !important;
    background: rgba(232, 56, 79, .12) !important;
    color: #ff5d75 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Section group headers — crimson LED accent bars */
body.admin-body .field-group-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 18px 0 2px !important;
    padding: 9px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: #ff5d75 !important;
    background: linear-gradient(90deg, rgba(232, 56, 79, .12), rgba(232, 56, 79, .02) 70%, transparent) !important;
    border-left: 3px solid #e8384f !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: inset 0 0 24px rgba(232, 56, 79, .05) !important;
}

body.admin-body .field-group-header .field-hint {
    margin-left: auto !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
}

/* Show-on-website checkbox → premium toggle tile */
body.admin-body .admin-form label.check,
body.admin-body .admin-inline-edit label.check {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 4px !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #c3ccdc !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: border-color .2s, background .2s !important;
}

body.admin-body .admin-form label.check:hover {
    border-color: rgba(232, 56, 79, .35) !important;
    background: rgba(232, 56, 79, .06) !important;
}

body.admin-body .admin-form label.check input[type="checkbox"],
body.admin-body .admin-inline-edit label.check input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    accent-color: #e8384f !important;
    cursor: pointer !important;
}

/* Create Card / Save CTA */
body.admin-body .admin-form>.btn.primary,
body.admin-body .admin-inline-edit>.btn.primary {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 6px !important;
    justify-content: center !important;
    font-size: 14.5px !important;
    letter-spacing: .3px !important;
}

/* Inline edit drawer styling */
body.admin-body .admin-inline-edit {
    padding: 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(232, 56, 79, .22) !important;
    box-shadow: 0 0 30px rgba(232, 56, 79, .07), inset 0 0 40px rgba(0, 0, 0, .25) !important;
    display: grid !important;
    gap: 12px !important;
}

body.admin-body .admin-inline-edit[hidden] {
    display: none !important;
}

/* ── 2. GAME CARDS ────────────────────────────────────────────── */
body.admin-body .compact-admin-grid {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
    gap: 20px !important;
}

body.admin-body .mini-admin-card.compact-manage-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #12161f 0%, #0d1017 100%) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

body.admin-body .mini-admin-card.compact-manage-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(232, 56, 79, .32) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .45), 0 0 26px rgba(232, 56, 79, .12) !important;
}

/* Image */
body.admin-body .game-admin-thumb {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    transition: transform .35s ease, filter .35s ease !important;
}

body.admin-body .mini-admin-card.compact-manage-card:hover .game-admin-thumb {
    transform: scale(1.04) !important;
    filter: saturate(1.12) brightness(1.05) !important;
}

/* Title block */
body.admin-body .compact-card-head {
    padding: 14px 16px 10px !important;
    align-items: flex-start !important;
}

body.admin-body .compact-card-head h3 {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

body.admin-body .compact-card-head p {
    margin: 3px 0 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #7c88a0 !important;
}

/* Status badges row */
body.admin-body .compact-badges {
    padding: 2px 16px 10px !important;
    gap: 7px !important;
}

body.admin-body .compact-badges .badge {
    height: 24px !important;
    align-items: center !important;
    font-size: 10.5px !important;
    letter-spacing: .4px !important;
}

/* OPEN = green · CLOSED = red (paid/unpaid semantics already correct) */

/* Pricing tiles grid */
body.admin-body .compact-prices {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 8px !important;
    padding: 2px 16px 12px !important;
    margin-bottom: 0 !important;
}

body.admin-body .compact-prices p {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    background: rgba(255, 255, 255, .028) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 10px !important;
}

body.admin-body .compact-prices p::before {
    content: none !important;
}

body.admin-body .compact-prices small {
    order: -1 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: #66738c !important;
}

body.admin-body .compact-prices strong {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
}

body.admin-body .compact-prices del {
    font-size: 11px !important;
    color: #66738c !important;
    font-weight: 600 !important;
    text-decoration-color: #e8384f !important;
    text-decoration-thickness: 1.5px !important;
}

/* Discount window strip → gold info bar */
body.admin-body .mini-admin-card>p[style] {
    margin: 0 16px 12px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fde047 !important;
    background: rgba(250, 204, 21, .07) !important;
    border: 1px solid rgba(250, 204, 21, .22) !important;
    border-radius: 8px !important;
}

/* ── 3. ACTION BUTTONS ────────────────────────────────────────── */
body.admin-body .compact-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px 16px 16px !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, .05) !important;
}

body.admin-body .compact-actions form {
    margin: 0 !important;
    display: contents !important;
}

body.admin-body .compact-actions .btn,
body.admin-body .compact-actions .danger-link {
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 6px !important;
}

/* EDIT — blue-gray */
body.admin-body .compact-actions .btn.outline[data-toggle-edit] {
    background: rgba(96, 165, 250, .08) !important;
    border: 1px solid rgba(96, 165, 250, .35) !important;
    color: #93c5fd !important;
}

body.admin-body .compact-actions .btn.outline[data-toggle-edit]:hover {
    background: rgba(96, 165, 250, .16) !important;
    box-shadow: 0 0 14px rgba(96, 165, 250, .22) !important;
}

/* HIDE/SHOW — dark neutral */
body.admin-body .compact-actions form .btn.outline {
    background: #161b26 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #aab4c6 !important;
}

body.admin-body .compact-actions form .btn.outline:hover {
    border-color: rgba(255, 77, 100, .4) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(232, 56, 79, .16) !important;
}

/* DELETE — red */
body.admin-body .compact-actions .danger-link {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(232, 56, 79, .10) !important;
    border: 1px solid rgba(232, 56, 79, .38) !important;
    color: #ff5d75 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .18s ease !important;
}

body.admin-body .compact-actions .danger-link:hover {
    background: rgba(232, 56, 79, .2) !important;
    box-shadow: 0 0 14px rgba(232, 56, 79, .3) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 400px) {
    body.admin-body .compact-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-body .compact-actions form:first-of-type,
    body.admin-body .compact-actions form:last-of-type {
        grid-column: span 1 !important;
    }

    body.admin-body .compact-actions .danger-link {
        grid-column: 1 / -1 !important;
    }
}

/* Empty state polish */
body.admin-body .admin-panel .empty i {
    color: #e8384f !important;
    opacity: .55 !important;
}


/* ------------------------------------------------------------
   ADMIN MEDIA PAGE � Premium Content-Management Dashboard
   Scoped to body.admin-body media classes only. UI/CSS only.
   ------------------------------------------------------------ */

/* -- 1) PAGE RHYTHM -- */
body.admin-body .admin-main>.admin-head {
    margin-bottom: 24px !important;
}

body.admin-body .admin-main>.admin-panel,
body.admin-body section.admin-panel {
    border-radius: 18px !important;
}

body.admin-body .admin-main>.admin-panel+.admin-panel,
body.admin-body section.admin-panel+section.admin-panel {
    margin-top: 20px !important;
}

body.admin-body .admin-panel {
    padding: 22px clamp(16px, 2vw, 24px) !important;
}

body.admin-body .admin-panel>h2 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

/* -- 2) COUNT BADGES � clean dark pills -- */
body.admin-body .admin-panel>h2 .badge.neutral {
    margin-left: auto !important;
    min-width: 30px !important;
    text-align: center !important;
    padding: 4px 12px !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 77, 100, .3) !important;
    border-radius: 999px !important;
    color: #ffb9c5 !important;
    font-size: 11.5px !important;
    box-shadow: 0 0 12px rgba(232, 56, 79, .12) !important;
}

/* -- 3) UPLOAD FORM � clean premium layout -- */
body.admin-body .admin-panel .admin-form {
    gap: 18px 14px !important;
}

body.admin-body .admin-panel .admin-form label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: #93a0b4 !important;
    gap: 7px !important;
}

body.admin-body .admin-panel .admin-form label .field-hint {
    text-transform: none !important;
    letter-spacing: .2px !important;
    font-weight: 600 !important;
    color: #66738c !important;
}

body.admin-body .admin-panel .admin-form input,
body.admin-body .admin-panel .admin-form select {
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}

/* Image Type dropdown � native look removed, Nexora styled */
body.admin-body .admin-panel .admin-form select[name="kind"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    color-scheme: dark !important;
    background-color: rgba(255, 255, 255, .04) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff5d75' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 42px !important;
    color: #eef2f8 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

body.admin-body .admin-panel .admin-form select[name="kind"]:hover {
    border-color: rgba(255, 77, 100, .45) !important;
}

body.admin-body .admin-panel .admin-form select[name="kind"]:focus {
    outline: none !important;
    border-color: #ff4d64 !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .16), 0 0 18px rgba(232, 56, 79, .12) !important;
}

body.admin-body .admin-panel .admin-form select[name="kind"] option {
    background: #0e1220 !important;
    color: #e7ecf5 !important;
    padding: 10px !important;
}

/* File input � consistent height, crimson selector button */
body.admin-body .admin-panel .admin-form input[type="file"] {
    padding: 8px 12px !important;
    cursor: pointer !important;
}

body.admin-body .admin-panel .admin-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 77, 100, .45);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(232, 56, 79, .25), rgba(158, 20, 40, .35));
    color: #ffc9d1;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease;
}

body.admin-body .admin-panel .admin-form input[type="file"]::file-selector-button:hover {
    filter: brightness(1.25);
}

/* Upload button � aligned on its own row */
body.admin-body .admin-panel .admin-form>.btn.primary {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    min-width: 200px !important;
    margin-top: 2px !important;
}

/* -- 4) MEDIA LIBRARY GRID -- */
body.admin-body .gallery-grid.admin-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

/* -- 5) MEDIA CARD -- */
body.admin-body .gallery-card.admin-gallery-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #12161f 0%, #0c0f16 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease !important;
}

body.admin-body .gallery-card.admin-gallery-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 77, 100, .4) !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .45),
        0 0 26px rgba(232, 56, 79, .14),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* image area � consistent crop, hover zoom */
body.admin-body .admin-gallery-card .gallery-media {
    position: relative !important;
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #0a0d13 !important;
    border-radius: 0 !important;
}

body.admin-body .admin-gallery-card .gallery-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1) !important;
}

body.admin-body .admin-gallery-card:hover .gallery-media img {
    transform: scale(1.055) !important;
}

/* kill the public magnifier pseudo */
body.admin-body .admin-gallery-card .gallery-media::after {
    content: none !important;
    display: none !important;
}

/* dark scrim for action overlay */
body.admin-body .admin-gallery-card .gallery-media::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg, transparent 42%, rgba(4, 6, 10, .88) 100%) !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
    pointer-events: none !important;
}

body.admin-body .admin-gallery-card:hover .gallery-media::before,
body.admin-body .admin-gallery-card:focus-within .gallery-media::before {
    opacity: 1 !important;
}

/* -- 6) ACTION OVERLAY (Edit / Delete on the image) -- */
body.admin-body .admin-gallery-card .media-actions {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 2 !important;
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity .22s ease, transform .22s ease !important;
}

body.admin-body .admin-gallery-card:hover .media-actions,
body.admin-body .admin-gallery-card:focus-within .media-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

body.admin-body .media-actions .action-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    background: rgba(10, 13, 19, .82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: #dbe2ee !important;
    font: inherit !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
}

body.admin-body .media-actions .edit-btn:hover,
body.admin-body .media-actions .edit-btn:focus-visible {
    border-color: rgba(250, 204, 21, .55) !important;
    color: #fde047 !important;
    background: rgba(250, 204, 21, .14) !important;
}

body.admin-body .media-actions .delete-btn:hover,
body.admin-body .media-actions .delete-btn:focus-visible {
    border-color: rgba(255, 77, 100, .6) !important;
    color: #ff8296 !important;
    background: rgba(232, 56, 79, .2) !important;
}

/* touch devices: actions always visible */
@media (hover: none) {
    body.admin-body .admin-gallery-card .media-actions {
        opacity: 1 !important;
        transform: none !important;
    }

    body.admin-body .admin-gallery-card .gallery-media::before {
        opacity: 1 !important;
    }
}

/* -- 7) CAPTION AREA � compact meta row -- */
body.admin-body .admin-gallery-card figcaption {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    padding: 12px 14px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .05) !important;
    display: grid !important;
    gap: 3px !important;
    min-height: 0 !important;
}

body.admin-body .admin-gallery-card figcaption strong {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.admin-body .admin-gallery-card figcaption span {
    color: #66738c !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* -- 8) EDIT PANEL � spans full grid row, dark glass -- */
body.admin-body .edit-panel {
    grid-column: 1 / -1 !important;
    margin: 0 0 4px !important;
    padding: 20px clamp(16px, 2vw, 22px) !important;
    background: linear-gradient(180deg, rgba(20, 25, 36, .92), rgba(11, 14, 21, .96)) !important;
    border: 1px solid rgba(255, 77, 100, .28) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4), 0 0 30px rgba(232, 56, 79, .08) !important;
    animation: mediaEditSlide .28s cubic-bezier(.2, .8, .2, 1);
}

@keyframes mediaEditSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

body.admin-body .edit-panel h3 {
    color: #ff5d75 !important;
    font-size: 15px !important;
}

body.admin-body .edit-actions {
    margin-top: 4px !important;
}

/* -- 9) EMPTY STATES � intentional futuristic containers -- */
body.admin-body .admin-panel .empty {
    padding: 46px 20px !important;
    border: 1px dashed rgba(255, 77, 100, .3) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(420px 190px at 50% 32%, rgba(232, 56, 79, .07), transparent 70%),
        rgba(255, 255, 255, .015) !important;
    color: #7c88a0 !important;
    font-size: 13.5px !important;
    box-shadow: 0 0 34px rgba(232, 56, 79, .06) !important;
}

/* -- 10) RESPONSIVE -- */
@media (max-width: 900px) {
    body.admin-body .gallery-grid.admin-gallery {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 640px) {
    body.admin-body .gallery-grid.admin-gallery {
        grid-template-columns: 1fr !important;
    }

    body.admin-body .admin-panel {
        padding: 18px 14px !important;
    }

    body.admin-body .admin-panel .admin-form>.btn.primary {
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-body .media-actions .action-btn {
        font-size: 11px !important;
        padding: 7px 8px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   NEXORA ADMIN — PRIZE POOL PAGE PREMIUM PASS
   Banner module · Live Preview · Prize Items · Gold accent system
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. BANNER MODULE — controls left · live preview right ────── */
body.admin-body .prize-admin-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 400px !important;
    gap: 26px !important;
    align-items: start !important;
}

body.admin-body .prize-admin-form {
    background: rgba(255, 255, 255, .02) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px !important;
    padding: 20px !important;
}

body.admin-body .prize-admin-form h3 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
}

body.admin-body .prize-admin-form h3 i {
    color: #ff5d75 !important;
}

body.admin-body .prize-admin-form textarea {
    min-height: 92px !important;
    resize: vertical !important;
    line-height: 1.55 !important;
}

body.admin-body .prize-admin-form .btn.primary {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 4px !important;
    justify-content: center !important;
}

/* ── 2. LIVE PREVIEW — miniature homepage banner ───────────────── */
body.admin-body .prize-admin-preview {
    position: sticky !important;
    top: 90px !important;
    display: grid !important;
    gap: 12px !important;
}

/* LIVE PREVIEW label → gold badge */
body.admin-body .prize-admin-preview .eyebrow.on-dark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    justify-self: start !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    color: #fde047 !important;
    border: 1px solid rgba(250, 204, 21, .45) !important;
    background: linear-gradient(135deg, rgba(250, 204, 21, .14), rgba(250, 204, 21, .04)) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 16px rgba(250, 204, 21, .15) !important;
}

body.admin-body .prize-admin-preview-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 190px !important;
    display: grid !important;
    place-content: center !important;
    text-align: center !important;
    padding: 30px 24px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(232, 56, 79, .28) !important;
    background:
        radial-gradient(340px 180px at 50% 0%, rgba(232, 56, 79, .14), transparent 70%),
        radial-gradient(280px 160px at 85% 100%, rgba(250, 204, 21, .07), transparent 70%),
        linear-gradient(180deg, #10141c 0%, #0a0d13 100%) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .45), inset 0 0 60px rgba(232, 56, 79, .05) !important;
}

body.admin-body .prize-admin-preview-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: repeating-linear-gradient(-55deg,
            transparent 0 46px,
            rgba(232, 56, 79, .035) 46px 47px,
            transparent 47px 96px) !important;
}

body.admin-body .preview-copy {
    position: relative !important;
    z-index: 1 !important;
}

body.admin-body .preview-copy h2 {
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    letter-spacing: .2px !important;
}

body.admin-body .preview-copy .prize-amount {
    display: inline-block !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    background: linear-gradient(135deg, #fde047 20%, #f59e0b 80%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 18px rgba(250, 204, 21, .28)) !important;
    margin-bottom: 8px !important;
}

body.admin-body .preview-copy p {
    color: #93a0b4 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ── 3. PRIZE ITEMS FORM — structured two-column ───────────────── */
body.admin-body section.admin-panel:not(.prize-admin-panel)>h3 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel)>h3 i {
    color: #fde047 !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel)>p[style] {
    color: #66738c !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px 16px !important;
    margin-bottom: 30px !important;
    padding: 18px !important;
    background: rgba(255, 255, 255, .02) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px !important;
}

/* Row placement: Title|Note · Amount|Image */
body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label:nth-of-type(3) {
    grid-column: 2;
    grid-row: 1;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
}

/* Active toggle tile spans under left column */
body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label[style] {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    color: #c3ccdc !important;
    cursor: pointer !important;
    transition: border-color .2s, background .2s !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label[style]:hover {
    border-color: rgba(232, 56, 79, .35) !important;
    background: rgba(232, 56, 79, .05) !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label[style] input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    accent-color: #e8384f !important;
}

/* Add button */
body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>.btn.primary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
}

/* ── 4. PRIZE ITEM CARDS ──────────────────────────────────────── */
body.admin-body section.admin-panel:not(.prize-admin-panel) .admin-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 18px !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #12161f 0%, #0d1017 100%) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(250, 204, 21, .3) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .45), 0 0 22px rgba(250, 204, 21, .08) !important;
}

/* images never stretch */
body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card img[style],
body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card div[style*="place-items"] {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    transition: transform .35s ease, filter .35s ease !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card:hover img[style] {
    transform: scale(1.045) !important;
    filter: saturate(1.1) brightness(1.04) !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card>strong {
    padding: 14px 16px 2px !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

/* amount → gold */
body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card>span[style] {
    display: block !important;
    padding: 3px 16px 0 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #fde047 !important;
    letter-spacing: .3px !important;
    text-shadow: 0 0 16px rgba(250, 204, 21, .25) !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card>p[style] {
    padding: 5px 16px 14px !important;
    color: #8b96ab !important;
    line-height: 1.55 !important;
}

/* footer actions bar */
body.admin-body section.admin-panel:not(.prize-admin-panel) .mini-admin-card>div[style] {
    margin-top: auto !important;
    padding: 11px 16px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .05) !important;
    background: rgba(0, 0, 0, .18) !important;
    align-items: center !important;
}

body.admin-body section.admin-panel:not(.prize-admin-panel) .tiny-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
}

/* empty state */
body.admin-body section.admin-panel:not(.prize-admin-panel) .empty i {
    color: #fde047 !important;
}

/* ── 5. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    body.admin-body .prize-admin-grid {
        grid-template-columns: 1fr !important;
    }

    body.admin-body .prize-admin-preview {
        position: static !important;
    }
}

@media (max-width: 640px) {
    body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked {
        grid-template-columns: 1fr !important;
    }

    body.admin-body section.admin-panel:not(.prize-admin-panel) form.admin-form.stacked>label:nth-of-type(n) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body.admin-body section.admin-panel:not(.prize-admin-panel) .admin-card-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   NEXORA ADMIN — STAFF USERS PAGE (create form · table · modals)
   ═══════════════════════════════════════════════════════════════ */

/* ── Create form: horizontal desktop → stacked mobile ─────────── */
body.admin-body .users-create-form {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    gap: 14px !important;
    align-items: end !important;
}

body.admin-body .users-create-form label {
    display: grid !important;
    gap: 6px !important;
}

body.admin-body .users-create-form input,
body.admin-body .users-create-form select {
    height: 42px !important;
    box-sizing: border-box !important;
    color-scheme: dark !important;
}

body.admin-body .users-create-form .btn.primary {
    min-height: 42px !important;
}

@media (max-width: 1100px) {
    body.admin-body .users-create-form {
        grid-template-columns: 1fr 1fr !important;
    }

    body.admin-body .users-create-form .btn.primary {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
    }
}

@media (max-width: 560px) {
    body.admin-body .users-create-form {
        grid-template-columns: 1fr !important;
    }
}

/* ── Table → premium glass data grid ──────────────────────────── */
body.admin-body .users-table-wrap {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .015) !important;
}

body.admin-body .users-table th {
    padding: 12px 16px !important;
    font-size: 10.5px !important;
    letter-spacing: 1.2px !important;
    color: #ff5d75 !important;
}

body.admin-body .users-table td {
    padding: 13px 16px !important;
    vertical-align: middle !important;
}

body.admin-body .u-name {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

body.admin-body .u-username {
    font-family: Consolas, monospace !important;
    font-size: 12.5px !important;
    color: #93a0b4 !important;
}

body.admin-body .u-role {
    color: #c3ccdc !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

/* Status badges */
body.admin-body .badge.st-active,
body.admin-body .badge.st-disabled {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 24px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
}

body.admin-body .badge.st-active {
    background: rgba(74, 222, 128, .09) !important;
    border: 1px solid rgba(74, 222, 128, .32) !important;
    color: #4ade80 !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, .14) !important;
}

body.admin-body .badge.st-active::before,
body.admin-body .badge.st-disabled::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 7px currentColor !important;
}

body.admin-body .badge.st-disabled {
    background: rgba(148, 163, 184, .07) !important;
    border: 1px solid rgba(232, 56, 79, .25) !important;
    color: #b98a94 !important;
}

/* ── Action buttons: never overlap ─────────────────────────────── */
body.admin-body .user-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-width: 300px !important;
}

body.admin-body .user-actions form {
    margin: 0 !important;
}

body.admin-body .act-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 31px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    background: #12161f !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #c3ccdc !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .18s ease !important;
    white-space: nowrap !important;
    font-family: inherit !important;
}

body.admin-body .act-btn i {
    font-size: 10.5px !important;
}

body.admin-body .act-edit {
    border-color: rgba(96, 165, 250, .35) !important;
    color: #93c5fd !important;
}

body.admin-body .act-edit:hover {
    background: rgba(96, 165, 250, .13) !important;
    box-shadow: 0 0 12px rgba(96, 165, 250, .22) !important;
}

body.admin-body .act-disable {
    border-color: rgba(232, 56, 79, .32) !important;
    color: #ff8296 !important;
}

body.admin-body .act-enable {
    border-color: rgba(74, 222, 128, .32) !important;
    color: #4ade80 !important;
}

body.admin-body .act-disable:hover,
body.admin-body .act-enable:hover {
    filter: brightness(1.25) !important;
    transform: translateY(-1px) !important;
}

body.admin-body .act-reset {
    border-color: rgba(250, 204, 21, .35) !important;
    color: #fde047 !important;
}

body.admin-body .act-reset:hover {
    background: rgba(250, 204, 21, .10) !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, .2) !important;
}

body.admin-body .act-delete {
    border-color: rgba(232, 56, 79, .42) !important;
    color: #ff5d75 !important;
}

body.admin-body .act-delete:hover {
    background: rgba(232, 56, 79, .15) !important;
    box-shadow: 0 0 14px rgba(232, 56, 79, .3) !important;
}

/* ── Modal system ─────────────────────────────────────────────── */
.nx-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(3, 5, 9, .72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.nx-modal[hidden] {
    display: none !important;
}

.nx-modal-card {
    width: min(480px, 100%) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    background:
        radial-gradient(420px 180px at 50% 0%, rgba(232, 56, 79, .09), transparent 70%),
        linear-gradient(180deg, #12161f 0%, #0c0f16 100%) !important;
    border: 1px solid rgba(255, 77, 100, .28) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(232, 56, 79, .12) !important;
    animation: nxModalIn .22s cubic-bezier(.2, .8, .2, 1) !important;
}

@keyframes nxModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.nx-modal-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

.nx-modal-head h3 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.nx-modal-head h3 i {
    color: #ff5d75 !important;
}

.nx-danger .nx-modal-head h3 i {
    color: #ff5d75 !important;
}

.nx-modal-x {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 8px !important;
    color: #93a0b4 !important;
    cursor: pointer !important;
    transition: all .18s ease !important;
}

.nx-modal-x:hover {
    color: #fff !important;
    border-color: rgba(232, 56, 79, .45) !important;
}

.nx-modal-body {
    padding: 18px 20px !important;
    display: grid !important;
    gap: 13px !important;
}

.nx-modal-body label {
    display: grid !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    color: #93a0b4 !important;
}

.nx-modal-body input,
.nx-modal-body select {
    height: 42px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    background: #0a0d13 !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 9px !important;
    color: #e7ecf5 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    width: 100% !important;
    color-scheme: dark !important;
    transition: border-color .2s, box-shadow .2s !important;
}

.nx-modal-body input:focus,
.nx-modal-body select:focus {
    outline: none !important;
    border-color: #ff4d64 !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .16) !important;
}

.nx-check {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 11px 13px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 9px !important;
    cursor: pointer !important;
}

.nx-check input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #e8384f !important;
}

.nx-modal-note {
    margin: 0 !important;
    color: #93a0b4 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.nx-modal-note strong {
    color: #fde047 !important;
}

.nx-danger .nx-modal-note strong {
    color: #ff8296 !important;
}

.nx-modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    padding: 15px 20px 18px !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
}

body.admin-body .btn.danger.small {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, .3) !important;
}

body.admin-body .btn.danger.small:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 22px rgba(239, 68, 68, .42) !important;
}

/* Empty state */
body.admin-body .users-empty {
    padding: 44px 24px !important;
}

body.admin-body .users-empty strong {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    margin-bottom: 6px !important;
}

body.admin-body .users-empty p {
    margin: 0 !important;
    color: #66738c !important;
    font-size: 13px !important;
}

/* ── Mobile: rows become user cards ───────────────────────────── */
@media (max-width: 760px) {
    body.admin-body .users-table-wrap {
        overflow: visible !important;
    }

    body.admin-body .users-table thead {
        display: none !important;
    }

    body.admin-body .users-table,
    body.admin-body .users-table tbody,
    body.admin-body .users-table tr,
    body.admin-body .users-table td {
        display: block !important;
        width: 100% !important;
    }

    body.admin-body .users-table tr {
        margin-bottom: 14px !important;
        padding: 15px 15px 13px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #12161f, #0d1017) !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-left: 3px solid rgba(232, 56, 79, .45) !important;
    }

    body.admin-body .users-table td {
        padding: 0 0 10px !important;
        border-bottom: none !important;
    }

    body.admin-body .users-table td::before {
        content: attr(data-label);
        display: block !important;
        margin-bottom: 3px !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: #55617a !important;
    }

    body.admin-body .user-actions {
        max-width: none !important;
        margin-top: 4px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, .06) !important;
    }

    body.admin-body .nx-modal-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
    }
}


/* ------------------------------------------------------------
   ADMIN QR SCANNER � Ticket-Verification Station (UI/CSS only)
   ------------------------------------------------------------ */

/* -- header ambient glow -- */
body.admin-body .admin-main>.admin-head {
    position: relative;
}

body.admin-body .qr-admin-panel {
    position: relative;
    overflow: hidden;
}

/* -- station layout: camera main / controls side -- */
body.admin-body .qr-station {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}

/* when camera mode is switched off, let the side take full width */
body.admin-body .qr-station:has(> [data-qr-panel="camera"][style*="display: none"]),
body.admin-body .qr-station:has(> [data-qr-panel="camera"][style*="display:none"]) {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* -- VIEWFINDER -- */
body.admin-body .qr-stage {
    min-width: 0 !important;
}

body.admin-body .qr-viewfinder {
    position: relative !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
    background: #05070c !important;
    border: 1px solid rgba(255, 77, 100, .35) !important;
    box-shadow:
        0 0 0 1px rgba(232, 56, 79, .08),
        0 0 34px rgba(232, 56, 79, .16),
        inset 0 0 60px rgba(232, 56, 79, .05),
        0 22px 50px rgba(0, 0, 0, .5) !important;
    overflow: hidden !important;
}

#qr-reader {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

#qr-reader img[alt="Info icon"] {
    display: none !important;
}

/* reticle � corner brackets */
.qr-reticle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(62%, 300px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
    --b: 2.5px solid rgba(255, 84, 102, .95);
    background:
        linear-gradient(var(--b), var(--b)) top left / 34px 34px,
        linear-gradient(var(--b), var(--b)) top right / 34px 34px,
        linear-gradient(var(--b), var(--b)) bottom left / 34px 34px,
        linear-gradient(var(--b), var(--b)) bottom right / 34px 34px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 8px rgba(232, 56, 79, .55));
}

/* animated scan line */
.qr-scanline {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 14%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, rgba(255, 90, 108, .95), transparent);
    box-shadow: 0 0 14px rgba(232, 56, 79, .75);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

.qr-viewfinder.is-active .qr-scanline {
    opacity: 1;
    animation: qrSweep 2.8s ease-in-out infinite;
}

@keyframes qrSweep {

    0%,
    100% {
        top: 15%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    50% {
        top: 83%;
        opacity: 1;
    }

    88% {
        opacity: 1;
    }
}

/* live status chip inside viewfinder */
.qr-cam-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #ffd9df;
    background: rgba(6, 8, 13, .78);
    border: 1px solid rgba(255, 77, 100, .4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.qr-cam-chip i {
    font-size: 7px;
    color: #ff5d75;
}

.qr-viewfinder.is-active .qr-cam-chip i {
    animation: pulse-dot 1.4s ease-in-out infinite;
}

.qr-cam-chip[data-state="live"] {
    color: #d6ffe4;
    border-color: rgba(74, 222, 128, .45);
}

.qr-cam-chip[data-state="live"] i {
    color: #4ade80;
}

/* idle placeholder */
.qr-cam-idle {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background:
        radial-gradient(420px 260px at 50% 42%, rgba(232, 56, 79, .10), transparent 70%),
        rgba(5, 7, 12, .6);
}

.qr-cam-idle i.fas {
    font-size: 44px;
    color: #ff5d75;
    text-shadow: 0 0 26px rgba(232, 56, 79, .5);
}

.qr-cam-idle strong {
    color: #fff;
    font-family: Rajdhani, sans-serif;
    font-size: 21px;
    letter-spacing: .5px;
}

.qr-cam-idle small {
    color: #93a0b4;
    font-size: 12.5px;
    max-width: 320px;
    line-height: 1.5;
}

.qr-cam-idle .btn {
    margin-top: 8px;
    min-height: 46px;
    padding: 12px 26px;
    border-radius: 12px;
}

/* error panel */
.qr-cam-error {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 26px;
    background: rgba(5, 7, 12, .94);
}

.qr-cam-error[hidden] {
    display: none !important;
}

.qr-cam-error>i {
    font-size: 40px;
    color: #ff5d75;
}

.qr-cam-error p {
    margin: 0;
    max-width: 420px;
    color: #e7ecf5;
    font-size: 13.5px;
    line-height: 1.6;
}

/* stage bar under preview */
body.admin-body .qr-stage-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.qr-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #66738c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.qr-live-indicator i {
    font-size: 8px;
}

.qr-live-indicator.on {
    color: #ff8296;
}

.qr-live-indicator.on i {
    animation: pulse-dot 1.3s ease-in-out infinite;
    color: #ff4d64;
}

/* -- SIDE COLUMN -- */
body.admin-body .qr-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

body.admin-body .qr-permission-strip {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

body.admin-body .qr-perm-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(20, 25, 36, .85), rgba(12, 15, 22, .92)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    transition: border-color .2s ease;
}

body.admin-body .qr-perm-item:hover {
    border-color: rgba(255, 77, 100, .28) !important;
}

body.admin-body .qr-perm-item.granted {
    border-color: rgba(74, 222, 128, .32) !important;
}

body.admin-body .qr-perm-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(232, 56, 79, .14) !important;
    border: 1px solid rgba(255, 77, 100, .3);
    color: #ff5d75 !important;
    font-size: 16px !important;
}

body.admin-body .qr-perm-item.granted .qr-perm-icon {
    background: rgba(74, 222, 128, .12) !important;
    color: #4ade80 !important;
}

body.admin-body .qr-perm-text strong {
    color: #fff !important;
    font-size: 13.5px !important;
}

body.admin-body .qr-perm-text small {
    color: #7c88a0 !important;
    font-size: 11.5px !important;
}

body.admin-body .qr-perm-item .btn {
    flex-shrink: 0 !important;
}

/* status card */
body.admin-body .qr-side-card {
    background: linear-gradient(180deg, rgba(20, 25, 36, .85), rgba(12, 15, 22, .92)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    padding: 16px !important;
}

body.admin-body .qr-side-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px !important;
    color: #93a0b4 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

body.admin-body .qr-side-label i {
    color: #ff5d75;
}

.qr-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: Rajdhani, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: #aab4c6;
}

.qr-status-pill[data-state="WAITING"] {
    color: #93a0b4;
}

.qr-status-pill[data-state="CAMERA_READY"] {
    color: #9ecbff;
    border-color: rgba(96, 165, 250, .4);
    background: rgba(96, 165, 250, .08);
}

.qr-status-pill[data-state="CAMERA_ACTIVE"],
.qr-status-pill[data-state="SCANNING"] {
    color: #ff8296;
    border-color: rgba(255, 77, 100, .45);
    background: rgba(232, 56, 79, .10);
    box-shadow: 0 0 16px rgba(232, 56, 79, .15);
}

.qr-status-pill[data-state="QR_DETECTED"],
.qr-status-pill[data-state="VERIFYING"] {
    color: #fde047;
    border-color: rgba(250, 204, 21, .45);
    background: rgba(250, 204, 21, .08);
}

.qr-status-pill[data-state="VERIFIED"] {
    color: #4ade80;
    border-color: rgba(74, 222, 128, .45);
    background: rgba(74, 222, 128, .10);
    box-shadow: 0 0 16px rgba(74, 222, 128, .15);
}

.qr-status-pill[data-state="REJECTED"],
.qr-status-pill[data-state="CAMERA_ERROR"] {
    color: #ff5d75;
    border-color: rgba(239, 68, 68, .5);
    background: rgba(239, 68, 68, .10);
}

.qr-status-note {
    display: block;
    margin-top: 10px;
    color: #7c88a0;
    font-size: 12px;
    line-height: 1.5;
}

/* -- MANUAL INPUT � dark, no white panel -- */
body.admin-body .qr-manual-panel {
    margin-top: 20px !important;
    max-width: 620px !important;
}

body.admin-body .manual-scan {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

body.admin-body .manual-scan label {
    color: #93a0b4 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    gap: 8px !important;
}

body.admin-body .manual-scan input {
    min-height: 48px !important;
    border-radius: 11px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    letter-spacing: .4px !important;
}

body.admin-body .manual-scan .btn.primary {
    min-height: 46px !important;
    padding: 12px 26px !important;
    border-radius: 11px !important;
    margin-top: 4px !important;
}

body.admin-body .manual-scan-hint {
    color: #66738c !important;
}

/* -- RESULT CARD � dark glass -- */
body.admin-body .qr-result-card {
    margin-top: 20px !important;
    padding: 18px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(20, 25, 36, .85), rgba(12, 15, 22, .94)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .4), 0 0 30px rgba(232, 56, 79, .05) !important;
}

body.admin-body .qr-result-card h2 {
    color: #fff !important;
    font-size: 19px !important;
    margin: 10px 0 6px !important;
}

body.admin-body .qr-result-card>p {
    color: #7c88a0 !important;
    font-size: 12.5px !important;
    margin: 0 0 12px !important;
}

body.admin-body .qr-line {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
}

/* -- SIDEBAR polish (visual only) -- */
body.admin-body .admin-side-nav a:not(.brand):hover {
    transform: translateX(2px);
}

body.admin-body .admin-side .side-head-brand,
body.admin-body .admin-side-head {
    padding-bottom: 14px !important;
}

/* -- MOBILE -- */
@media (max-width: 1024px) {
    body.admin-body .qr-station {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body.admin-body .qr-viewfinder {
        aspect-ratio: 3 / 4 !important;
        border-radius: 15px !important;
    }

    .qr-reticle {
        width: min(70%, 250px);
    }

    body.admin-body .qr-cam-idle strong {
        font-size: 18px;
    }

    body.admin-body .qr-cam-idle .btn {
        min-height: 48px;
    }

    body.admin-body .qr-stage-bar .btn {
        min-height: 44px;
    }

    body.admin-body .qr-mode-btn {
        min-height: 52px !important;
    }

    body.admin-body .qr-perm-item {
        padding: 13px 12px !important;
    }

    body.admin-body .qr-perm-item .btn {
        min-height: 40px;
    }

    body.admin-body .manual-scan input {
        min-height: 50px !important;
        font-size: 16px !important;
    }

    body.admin-body .manual-scan .btn.primary {
        width: 100% !important;
        min-height: 50px !important;
    }

    .qr-cam-error p {
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qr-scanline {
        animation: none !important;
        opacity: .25 !important;
    }

    .qr-live-indicator.on i,
    .qr-viewfinder.is-active .qr-cam-chip i {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   NEXORA ADMIN — ROLES & PERMISSIONS PAGE (contrast fix + cards)
   ═══════════════════════════════════════════════════════════════ */

/* ── Create form ──────────────────────────────────────────────── */
body.admin-body .roles-create-fields {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    gap: 14px !important;
    margin-bottom: 6px !important;
}

@media (max-width: 700px) {
    body.admin-body .roles-create-fields {
        grid-template-columns: 1fr !important;
    }
}

body.admin-body .roles-create-form .btn.primary {
    margin-top: 16px !important;
    min-height: 44px !important;
}

/* ── Permission groups ────────────────────────────────────────── */
body.admin-body .perm-group {
    margin-top: 20px !important;
}

body.admin-body .perm-group-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding-bottom: 9px !important;
    color: #ffffff !important;
    /* FIX: headings were near-invisible */
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(232, 56, 79, .28) !important;
}

body.admin-body .perm-group-title::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
    background: #e8384f !important;
    box-shadow: 0 0 9px rgba(232, 56, 79, .7) !important;
    flex-shrink: 0 !important;
}

body.admin-body .perm-group-title span {
    margin-left: auto !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    color: #93a0b4 !important;
}

/* ── Permission cards — HIGH CONTRAST ─────────────────────────── */
body.admin-body .perm-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 9px !important;
}

body.admin-body .perm-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    padding: 12px 13px !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body.admin-body .perm-card:hover {
    border-color: rgba(232, 56, 79, .5) !important;
    background: rgba(232, 56, 79, .06) !important;
    box-shadow: 0 0 16px rgba(232, 56, 79, .14) !important;
}

/* native checkbox hidden — custom LED box replaces it */
body.admin-body .perm-card input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.admin-body .perm-box {
    flex: 0 0 auto !important;
    width: 19px !important;
    height: 19px !important;
    margin-top: 1px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    background: #0a0d13 !important;
    border: 2px solid rgba(255, 255, 255, .28) !important;
    /* FIX: visible unchecked border */
    transition: all .15s ease !important;
}

body.admin-body .perm-box i {
    font-size: 10px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(.4) !important;
    transition: all .15s ease !important;
}

/* checked state — crimson fill + white check */
body.admin-body .perm-card input:checked~.perm-box {
    background: linear-gradient(135deg, #ff2d52, #b3123a) !important;
    border-color: #ff4d64 !important;
    box-shadow: 0 0 12px rgba(232, 56, 79, .55) !important;
}

body.admin-body .perm-card input:checked~.perm-box i {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* checked card tint */
body.admin-body .perm-card:has(input:checked) {
    border-color: rgba(232, 56, 79, .42) !important;
    background: rgba(232, 56, 79, .075) !important;
}

body.admin-body .perm-text {
    color: #e4e9f3 !important;
    /* FIX: labels were near-invisible */
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

/* ── Role blocks ──────────────────────────────────────────────── */
body.admin-body .role-block {
    margin-top: 24px !important;
}

body.admin-body .role-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

body.admin-body .role-id-block h2 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    margin: 0 0 4px !important;
}

body.admin-body .role-desc {
    color: #93a0b4 !important;
    font-size: 13px !important;
    margin: 0 0 8px !important;
}

body.admin-body .role-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    background: rgba(250, 204, 21, .08) !important;
    border: 1px solid rgba(250, 204, 21, .28) !important;
    color: #fde047 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

body.admin-body .role-actions {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

body.admin-body .role-actions .act-btn {
    width: auto !important;
    padding: 0 14px !important;
}

body.admin-body .role-save {
    margin-top: 18px !important;
    min-height: 44px !important;
}

/* ── Audit table polish ───────────────────────────────────────── */
body.admin-body .audit-wrap {
    border-radius: 12px !important;
}

body.admin-body .audit-table th {
    color: #ff5d75 !important;
    letter-spacing: 1.2px !important;
    font-size: 10.5px !important;
}

body.admin-body .audit-action {
    font-family: Consolas, monospace !important;
    text-transform: lowercase !important;
}

body.admin-body .audit-details {
    font-family: Consolas, monospace !important;
    font-size: 11.5px !important;
    color: #8b96ab !important;
    overflow-wrap: anywhere !important;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.admin-body .audit-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.admin-body .audit-table td::before {
        content: attr(data-label);
        display: block !important;
        margin-bottom: 3px !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        letter-spacing: 1.1px !important;
        text-transform: uppercase !important;
        color: #55617a !important;
    }

    body.admin-body .audit-table thead {
        display: none !important;
    }

    body.admin-body .audit-table,
    body.admin-body .audit-table tbody,
    body.admin-body .audit-table tr,
    body.admin-body .audit-table td {
        display: block !important;
        width: 100% !important;
    }

    body.admin-body .audit-table tr {
        margin-bottom: 12px !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
        background: #10141c !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
    }

    body.admin-body .audit-table td {
        padding: 0 0 10px !important;
        border-bottom: none !important;
    }
}

/* ── Permission group header with Select All toggle ────────── */
body.admin-body .perm-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

body.admin-body .perm-group-header .perm-group-title {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

body.admin-body .perm-toggle-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #93a0b4 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    cursor: pointer !important;
    transition: all .18s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

body.admin-body .perm-toggle-all:hover {
    background: rgba(232, 56, 79, .1) !important;
    border-color: rgba(232, 56, 79, .4) !important;
    color: #ff5d75 !important;
}

body.admin-body .perm-toggle-all i {
    font-size: 10px !important;
}

/* ── Role meta chips (user count) ──────────────────────────── */
body.admin-body .role-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

body.admin-body .role-member-chip {
    background: rgba(59, 130, 246, .08) !important;
    border-color: rgba(59, 130, 246, .28) !important;
    color: #60a5fa !important;
}

body.admin-body .role-id-block h2 i {
    color: #ff5d75 !important;
    font-size: 16px !important;
}

/* ── Roles create section ──────────────────────────────────── */
body.admin-body .roles-create-section {
    border: 1px solid rgba(232, 56, 79, .2) !important;
    border-left: 3px solid #e8384f !important;
}

/* ── Users page: create grid ───────────────────────────────── */
body.admin-body .users-create-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 700px) {
    body.admin-body .users-create-grid {
        grid-template-columns: 1fr !important;
    }
}

body.admin-body .users-create-form .btn.primary {
    margin-top: 4px !important;
    min-height: 44px !important;
}

/* ── Users page: extra permissions badge ───────────────────── */
body.admin-body .perm-badge-extra {
    background: rgba(232, 56, 79, .1) !important;
    border: 1px solid rgba(232, 56, 79, .3) !important;
    color: #ff5d75 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

body.admin-body .perm-badge-extra i {
    font-size: 10px !important;
}

body.admin-body .perm-none-label {
    color: #55617a !important;
    font-size: 12px !important;
    font-style: italic !important;
}

/* ── Users page: Permissions button ────────────────────────── */
body.admin-body .act-btn.act-perms {
    background: rgba(232, 56, 79, .08) !important;
    border-color: rgba(232, 56, 79, .3) !important;
    color: #ff5d75 !important;
}

body.admin-body .act-btn.act-perms:hover {
    background: rgba(232, 56, 79, .18) !important;
    border-color: rgba(232, 56, 79, .55) !important;
}

/* ── Wide permissions modal ────────────────────────────────── */
body.admin-body .nx-modal-wide {
    max-width: 820px !important;
}

body.admin-body .nx-modal-wide .nx-modal-body {
    max-height: 65vh !important;
    overflow-y: auto !important;
    padding: 24px !important;
}

/* ── Permission cards in modal — compact variant ───────────── */
body.admin-body .nx-modal-wide .perm-grid {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important;
}

body.admin-body .nx-modal-wide .perm-card {
    padding: 10px 12px !important;
}

body.admin-body .nx-modal-wide .perm-text {
    font-size: 12px !important;
}

/* ── QR Scanner: restricted record message ─────────────────── */
body.admin-body .qr-record-restricted {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    background: rgba(232, 56, 79, .08) !important;
    border: 1px dashed rgba(232, 56, 79, .35) !important;
    color: #ff5d75 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

body.admin-body .qr-record-restricted i {
    font-size: 14px !important;
    opacity: .8 !important;
}


/* ------------------------------------------------------------
   ADMIN SETTINGS PAGE — Premium Control Center (UI/CSS only)
   ------------------------------------------------------------ */

body.admin-body .set-panel {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

body.admin-body .set-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232, 56, 79, .55), rgba(250, 204, 21, .35), rgba(232, 56, 79, .55), transparent);
    pointer-events: none;
}

/* section head */
body.admin-body .set-head {
    display: flex !important;
    align-items: center;
    gap: 14px !important;
    padding: 20px clamp(16px, 2vw, 24px) 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(180deg, rgba(232, 56, 79, .05), transparent);
}

body.admin-body .set-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(232, 56, 79, .22), rgba(158, 20, 40, .30));
    border: 1px solid rgba(255, 77, 100, .4);
    color: #ff5d75 !important;
    font-size: 17px;
    box-shadow: 0 0 18px rgba(232, 56, 79, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.admin-body .set-title h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    border: 0 !important;
}

body.admin-body .set-title p {
    margin: 3px 0 0 !important;
    color: #7c88a0 !important;
    font-size: 12.5px !important;
    line-height: 1.45;
}

body.admin-body .set-body {
    padding: 20px clamp(16px, 2vw, 24px) 4px !important;
}

body.admin-body .set-foot {
    padding: 16px clamp(16px, 2vw, 24px) 20px !important;
    border-top: 1px solid rgba(255, 255, 255, .05);
    margin-top: 18px;
}

body.admin-body .set-foot .btn.primary {
    min-width: 190px;
}

/* -- branding preview cards -- */
body.admin-body .brand-previews,
body.admin-body .qr-preview {
    margin: 0 0 18px !important;
}

body.admin-body .brand-previews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 260px));
    gap: 16px;
}

body.admin-body .media-preview-card {
    margin: 0;
    background: linear-gradient(180deg, #12161f, #0c0f16);
    border: 1px solid rgba(255, 77, 100, .22);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35), 0 0 22px rgba(232, 56, 79, .06);
}

body.admin-body .mpc-media {
    aspect-ratio: 16 / 9;
    background: #0a0d13;
}

body.admin-body .mpc-media img {
    width: 100%;
    height: 100%;
    display: block;
}

body.admin-body .mpc-contain img {
    object-fit: contain;
    padding: 12px;
}

body.admin-body .mpc-cover img {
    object-fit: cover;
}

body.admin-body .mpc-media.qr-white {
    aspect-ratio: 1/1;
    max-width: 170px;
    background: #fff;
    padding: 8px;
}

body.admin-body .media-preview-card figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #93a0b4 !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

body.admin-body .media-preview-card figcaption i {
    color: #ff5d75;
}

/* upload tiles match theme */
body.admin-body .upload-tile input[type="file"] {
    cursor: pointer;
}

body.admin-body .upload-tile input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 77, 100, .45);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(232, 56, 79, .25), rgba(158, 20, 40, .35));
    color: #ffc9d1;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease;
}

body.admin-body .upload-tile input[type="file"]::file-selector-button:hover {
    filter: brightness(1.25);
}

/* -- navigation theme LIVE PREVIEW -- */
body.admin-body .nav-theme-preview {
    --ntp-bg: var(--site-nav-bg, #0c0c10);
    --ntp-text: var(--site-nav-text, #ffffff);
    --ntp-accent: var(--site-nav-accent, #e8384f);
    max-width: 100%;
    margin-bottom: 18px;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 26px rgba(232, 56, 79, .07);
}

.ntp-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background:
        linear-gradient(rgba(6, 7, 10, .16), rgba(6, 7, 10, .16)),
        var(--ntp-bg);
}

.ntp-brand {
    font-family: Rajdhani, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--ntp-text);
    white-space: nowrap;
}

.ntp-brand em {
    font-style: normal;
    opacity: .85;
}

.ntp-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.ntp-links span {
    position: relative;
    padding: 6px 11px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ntp-text);
    opacity: .92;
}

.ntp-links span:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--ntp-accent);
}

.ntp-active {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--ntp-accent) !important;
    text-shadow: 0 0 10px currentColor;
}

.ntp-active::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ntp-accent);
    box-shadow: 0 0 9px var(--ntp-accent);
}

.ntp-cta {
    padding: 7px 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #14151a;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* -- color picker controls -- */
body.admin-body .color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 14px;
}

.color-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.color-field:hover {
    border-color: rgba(255, 77, 100, .35);
}

.color-field:focus-within {
    border-color: #ff4d64;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .14);
}

.cf-swatch {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #333;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
}

.cf-native {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.cf-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.cf-name {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #93a0b4;
}

.cf-hex {
    width: 100%;
    max-width: 110px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0a0d13;
    color: #e7ecf5;
    font-family: 'Consolas', monospace;
    font-size: 12.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.cf-hex:focus {
    outline: none;
    border-color: #ff4d64;
}

/* -- settings form grid -- */
body.admin-body .settings-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 16px 14px !important;
}

body.admin-body .settings-grid>label.full {
    grid-column: span 12;
}

body.admin-body .settings-grid>label.two-thirds {
    grid-column: span 8;
}

body.admin-body .settings-grid>label.half {
    grid-column: span 6;
}

body.admin-body .settings-grid>label.third {
    grid-column: span 4;
}

body.admin-body .settings-grid>label.quarter {
    grid-column: span 3;
}

/* inputs inside settings keep consistent height */
body.admin-body .set-panel input:not([type="checkbox"]):not([type="color"]):not(.cf-hex),
body.admin-body .set-panel select,
body.admin-body .set-panel textarea {
    min-height: 44px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
}

body.admin-body .set-panel textarea {
    min-height: 0 !important;
    line-height: 1.65 !important;
    resize: vertical;
    padding: 12px 14px !important;
}

body.admin-body .set-panel textarea:focus {
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .15), 0 0 18px rgba(232, 56, 79, .1) !important;
}

/* contact/social field icons */
.icon-field {
    position: relative;
}

.icon-field>i {
    position: absolute;
    right: 12px;
    bottom: 15px;
    color: #55607a;
    font-size: 12.5px;
    pointer-events: none;
    z-index: 1;
}

/* optional marker */
label.optional>.field-hint:first-child {
    color: #facc15;
}

/* -- registration open toggle switch -- */
.switch-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: border-color .2s ease;
}

.switch-row:hover {
    border-color: rgba(255, 77, 100, .35);
}

.switch-copy {
    display: grid;
    gap: 3px;
}

.switch-copy strong {
    color: #fff;
    font-size: 13.5px;
}

.switch-copy small {
    color: #7c88a0;
    font-size: 11.5px;
}

.switch {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 28px;
}

.switch input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #1a2030;
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background .22s ease, border-color .22s ease;
}

.switch i::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #8b95a9;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .22s ease;
}

.switch input:checked+i {
    background: linear-gradient(135deg, rgba(232, 56, 79, .55), rgba(74, 222, 128, .45));
    border-color: rgba(74, 222, 128, .5);
}

.switch input:checked+i::after {
    transform: translateX(24px);
    background: #4ade80;
    box-shadow: 0 0 12px rgba(74, 222, 128, .6);
}

.switch input:focus-visible+i {
    outline: 2px solid #ff4d64;
    outline-offset: 2px;
}

/* -- password fields -- */
.pw-wrap {
    position: relative;
    display: block;
}

.pw-wrap input {
    padding-right: 46px !important;
}

.pw-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #93a0b4;
    font-size: 13px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.pw-eye:hover {
    color: #ff5d75;
    background: rgba(232, 56, 79, .12);
}

.pw-mismatch {
    grid-column: span 12;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #ff8296;
    font-size: 12.5px;
    font-weight: 700;
}

/* -- responsive -- */
@media (max-width: 1024px) {

    body.admin-body .settings-grid>label.third,
    body.admin-body .settings-grid>label.quarter {
        grid-column: span 6;
    }

    body.admin-body .settings-grid>label.two-thirds {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {

    body.admin-body .settings-grid>label.full,
    body.admin-body .settings-grid>label.half,
    body.admin-body .settings-grid>label.third,
    body.admin-body .settings-grid>label.quarter {
        grid-column: span 12;
    }

    body.admin-body .set-head {
        align-items: flex-start;
    }

    body.admin-body .set-foot .btn.primary {
        width: 100%;
        min-width: 0;
    }

    body.admin-body .cf-hex {
        max-width: none;
    }

    body.admin-body .switch-row {
        align-items: flex-start;
    }

    body.admin-body .switch {
        margin-top: 4px;
    }
}


/* ------------------------------------------------------------
   ADMIN SIDEBAR v3 � Premium Esports Command Rail
   Links / routes / labels / permissions unchanged � visual only.
   ------------------------------------------------------------ */

/* -- shell -- */
body.admin-body .admin-side {
    background:
        radial-gradient(420px 260px at 18% -6%, rgba(232, 56, 79, .14), transparent 62%),
        radial-gradient(360px 300px at 110% 108%, rgba(23, 37, 74, .45), transparent 64%),
        linear-gradient(180deg, #05070c 0%, #070a10 55%, #04060a 100%) !important;
    border-right: 1px solid rgba(255, 77, 100, .16) !important;
    box-shadow:
        inset -1px 0 0 rgba(255, 77, 100, .06),
        18px 0 46px rgba(0, 0, 0, .38) !important;
}

/* ambient neon orbs behind content */
body.admin-body .side-ambience {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

body.admin-body .side-ambience::before,
body.admin-body .side-ambience::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
}

body.admin-body .side-ambience::before {
    top: -70px;
    left: -60px;
    width: 230px;
    height: 230px;
    background: rgba(232, 56, 79, .13);
}

body.admin-body .side-ambience::after {
    bottom: -80px;
    right: -70px;
    width: 220px;
    height: 220px;
    background: rgba(28, 44, 88, .35);
}

/* thin crimson LED line down the right edge */
body.admin-body .admin-side::after {
    content: '' !important;
    position: absolute !important;
    top: 6% !important;
    bottom: 6% !important;
    right: -1px !important;
    width: 2px !important;
    border-radius: 99px;
    background: linear-gradient(180deg,
            transparent,
            rgba(232, 56, 79, .55) 12%,
            rgba(255, 84, 102, .9) 30%,
            rgba(232, 56, 79, .25) 52%,
            rgba(255, 84, 102, .85) 74%,
            rgba(232, 56, 79, .4) 92%,
            transparent) !important;
    opacity: .5;
    filter: drop-shadow(0 0 6px rgba(232, 56, 79, .5));
    pointer-events: none;
    z-index: 2;
}

/* keep every direct child above ambience */
body.admin-body .admin-side>* {
    position: relative;
    z-index: 1;
}

/* -- logo head � glass frame -- */
body.admin-body .admin-side-head {
    padding: 18px 14px 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 77, 100, .14) !important;
    background: linear-gradient(180deg, rgba(232, 56, 79, .05), transparent);
}

body.admin-body .admin-side-head .brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 9px 10px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
        rgba(10, 13, 20, .6);
    border: 1px solid rgba(255, 77, 100, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 24px rgba(232, 56, 79, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .25s ease, box-shadow .25s ease;
}

body.admin-body .admin-side-head .brand:hover {
    border-color: rgba(255, 77, 100, .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 32px rgba(232, 56, 79, .22);
}

body.admin-body .admin-side-head .brand-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 118px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 10px rgba(232, 56, 79, .3));
}

/* -- section labels -- */
body.admin-body .admin-side .side-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 16px 14px 7px !important;
    color: #ff5d75 !important;
    font-size: 9.5px !important;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(232, 56, 79, .4);
}

body.admin-body .admin-side .side-label::before {
    content: '';
    width: 14px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #e8384f, transparent);
    box-shadow: 0 0 8px rgba(232, 56, 79, .6);
}

/* -- menu cards -- */
body.admin-body .admin-side-nav {
    padding: 2px 12px 14px !important;
    gap: 4px !important;
}

body.admin-body .admin-side-nav a:not(.brand),
body.admin-body .admin-side-foot a {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .026);
    border: 1px solid rgba(255, 255, 255, .055);
    color: #a7b0c2 !important;
    font-size: 13.4px !important;
    font-weight: 600 !important;
    letter-spacing: .15px;
    transition:
        transform .22s cubic-bezier(.2, .8, .2, 1),
        border-color .22s ease,
        background .22s ease,
        color .22s ease,
        box-shadow .22s ease;
    overflow: hidden;
}

body.admin-body .admin-side-nav a:not(.brand):hover,
body.admin-body .admin-side-foot a:hover {
    transform: translateY(-1px);
    background: rgba(232, 56, 79, .09);
    border-color: rgba(255, 77, 100, .38);
    color: #ffffff !important;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .35),
        0 0 18px rgba(232, 56, 79, .14);
}

body.admin-body .admin-side-nav a:not(.brand) i,
body.admin-body .admin-side-foot a i {
    flex: 0 0 30px;
    width: 30px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .06);
    color: #8b95a9;
    font-size: 13px;
    text-align: center;
    transition: all .22s ease;
}

body.admin-body .admin-side-nav a:not(.brand):hover i,
body.admin-body .admin-side-foot a:hover i {
    background: rgba(232, 56, 79, .16);
    border-color: rgba(255, 77, 100, .4);
    color: #ff6a7d;
    box-shadow: 0 0 12px rgba(232, 56, 79, .3);
}

/* -- ACTIVE item � crimson gradient + glowing edge -- */
body.admin-body .admin-side-nav a.active,
body.admin-body .admin-side-nav a:not(.brand).active {
    background:
        linear-gradient(135deg, rgba(232, 56, 79, .34), rgba(140, 18, 36, .58)) !important;
    border-color: rgba(255, 77, 100, .55) !important;
    color: #ffffff !important;
    box-shadow:
        inset 3px 0 0 #ff4d64,
        0 0 20px rgba(232, 56, 79, .28),
        0 8px 24px rgba(120, 10, 25, .35) !important;
    text-shadow: 0 0 12px rgba(255, 120, 134, .4);
    transform: none;
}

body.admin-body .admin-side-nav a.active i,
body.admin-body .admin-side-nav a:not(.brand).active i {
    background: rgba(255, 84, 102, .2) !important;
    border-color: rgba(255, 120, 134, .5) !important;
    color: #ffb9c5 !important;
    box-shadow: 0 0 14px rgba(232, 56, 79, .45);
}

/* -- footer block (External: View Website / Logout) -- */
body.admin-body .admin-side-foot {
    margin-top: auto;
    padding: 10px 12px max(16px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: grid;
    gap: 4px;
    background: linear-gradient(180deg, transparent, rgba(232, 56, 79, .04));
}

body.admin-body .admin-side-foot .side-label {
    padding-top: 4px !important;
}

body.admin-body .admin-side-foot a.logout {
    color: #ff8296 !important;
    border-color: rgba(232, 56, 79, .22);
    background: rgba(232, 56, 79, .05);
}

body.admin-body .admin-side-foot a.logout i {
    color: #ff5d75;
}

body.admin-body .admin-side-foot a.logout:hover {
    background: rgba(232, 56, 79, .14);
    border-color: rgba(255, 77, 100, .5);
    box-shadow: 0 0 18px rgba(232, 56, 79, .2);
}

/* slim scrollbar */
body.admin-body .admin-side::-webkit-scrollbar {
    width: 5px;
}

body.admin-body .admin-side::-webkit-scrollbar-track {
    background: transparent;
}

body.admin-body .admin-side::-webkit-scrollbar-thumb {
    background: rgba(232, 56, 79, .28);
    border-radius: 99px;
}

/* ---------------------------------------
   MOBILE DRAWER � compact icon rail cards
   --------------------------------------- */
@media (max-width: 1024px) {
    body.admin-body .admin-side.open .admin-side-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-content: start;
        padding: 4px 10px 12px !important;
    }

    /* labels span the full row, tiny */
    body.admin-body .admin-side.open .side-label {
        grid-column: 1 / -1;
        padding: 10px 4px 4px !important;
        letter-spacing: 1.8px;
    }

    /* icon-first tiles */
    body.admin-body .admin-side.open .admin-side-nav a:not(.brand) {
        flex-direction: column !important;
        justify-content: center;
        gap: 7px !important;
        min-height: 86px;
        padding: 10px 6px !important;
        text-align: center;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, .03);
        word-break: break-word;
    }

    body.admin-body .admin-side.open .admin-side-nav a:not(.brand) i {
        flex: 0 0 auto;
        width: 40px !important;
        height: 36px !important;
        font-size: 15px !important;
        border-radius: 11px !important;
    }

    body.admin-body .admin-side.open .admin-side-nav a:not(.brand)::after {
        content: attr(title);
        display: block;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .3px;
        line-height: 1.25;
        color: inherit;
        opacity: .95;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* original text node hidden � replaced by title-based mini label */
    body.admin-body .admin-side.open .admin-side-nav a:not(.brand) {
        font-size: 0 !important;
    }

    body.admin-body .admin-side.open .admin-side-nav a.active {
        box-shadow:
            inset 0 2px 0 #ff4d64,
            0 0 22px rgba(232, 56, 79, .32) !important;
    }

    body.admin-body .admin-side.open .qr-live-indicator,
    body.admin-body .admin-side.open .admin-drawer-close {
        z-index: 5;
    }

    body.admin-body .admin-side-foot {
        padding: 10px 10px max(14px, env(safe-area-inset-bottom)) !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.admin-body .admin-side-foot .side-label {
        grid-column: 1 / -1;
    }

    body.admin-body .admin-side-foot a {
        justify-content: center !important;
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {

    body.admin-body .admin-side-nav a:not(.brand),
    body.admin-body .admin-side-foot a {
        transition: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS — Navigation Theme color controls (swatch + live HEX)
   ═══════════════════════════════════════════════════════════════ */

/* Name + live hex side-by-side */
body.admin-body .cf-meta {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 10px !important;
}

/* Live hex value chip (display-only) */
body.admin-body .cf-live {
    font-family: 'Consolas', monospace !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .6px !important;
    color: #fde047 !important;
    background: rgba(250, 204, 21, .08) !important;
    border: 1px solid rgba(250, 204, 21, .28) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
}

/* Swatch: bigger, checkerboard underlay, ring — always reflects value */
body.admin-body .color-field .cf-swatch {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 11px !important;
    /* NO forced fill here — inline style / JS sets the real color.
       Plain (non-!important) fallback only, so selected colors always win. */
    background-color: #333;
    background-clip: padding-box !important;
    border: 2px solid rgba(255, 255, 255, .35) !important;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .4),
        0 3px 12px rgba(0, 0, 0, .45) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

body.admin-body .color-field:hover .cf-swatch {
    transform: scale(1.05) !important;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, .4),
        0 0 16px rgba(232, 56, 79, .3) !important;
}

/* Native picker covers the swatch exactly (invisible click target) */
body.admin-body .color-field .cf-native {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 46px !important;
    transform: none !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* Restore editable hex input styling beaten by global admin rules */
body.admin-body .set-panel input.cf-hex,
body.admin-body .admin-panel input.cf-hex {
    background: #0a0d13 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    min-height: 34px !important;
    height: 34px !important;
    max-width: 120px !important;
    justify-self: end !important;
}

/* ------------------------------------------------------------
   SIDEBAR SPACING FIX � logo head owns its space; labels never
   scroll behind it. Positioning only: design/colors untouched.
   ------------------------------------------------------------ */

/* Opaque header plate so scrolled items cannot show through */
body.admin-body .admin-side-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    flex-shrink: 0;
    padding: 16px 14px 14px !important;
    margin: 0 0 6px !important;
    background: linear-gradient(180deg, #06080d 0%, #05070c 100%) !important;
    border-bottom: 1px solid rgba(255, 77, 100, .16) !important;
}

/* kill legacy inner border/padding bleeding into the glass card */
body.admin-body .admin-side-head .brand {
    margin: 0 !important;
    padding: 9px 10px !important;
    border-bottom: 0 !important;
}

/* clear runway between logo card and first section label */
body.admin-body .admin-side-nav {
    padding-top: 12px !important;
    scroll-margin-top: 96px;
}

body.admin-body .admin-side .side-label:first-child,
body.admin-body .admin-side-nav .side-label:first-child {
    padding-top: 4px !important;
}

/* drawer-close button stays clear of the logo row */
body.admin-body .admin-drawer-close {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   SIDEBAR LAYOUT v2 � overlap-proof structure
   The sidebar is a non-scrolling flex COLUMN:
     [head: fixed block] [nav: only scrolling area] [foot: pinned]
   Sibling rows cannot overlap by construction, on any width.
   ------------------------------------------------------------ */

body.admin-body .admin-side {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: hidden !important;
    /* aside never scrolls */
    overflow-x: hidden !important;
}

/* -- HEADER: rigid, self-sized block � sticky removed entirely -- */
body.admin-body .admin-side .admin-side-head,
body.admin-body aside.admin-side .admin-side-head {
    position: relative !important;
    /* kills every legacy sticky rule */
    top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 6 !important;
    min-height: 76px;
    box-sizing: border-box;
    padding: 16px 14px 14px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, #06080d 0%, #05070c 100%) !important;
    border-bottom: 1px solid rgba(255, 77, 100, .18) !important;
}

body.admin-body .admin-side .admin-side-head::after {
    /* soft glow under the plate instead of transparency */
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -1px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, rgba(255, 84, 102, .55), rgba(250, 204, 21, .25), rgba(255, 84, 102, .55), transparent);
    pointer-events: none;
}

body.admin-body .admin-side .admin-side-head .brand {
    margin: 0 !important;
    padding: 9px 11px !important;
    border-bottom: 0 !important;
    min-height: 44px;
}

body.admin-body .admin-side .admin-side-head .brand-logo {
    flex: 0 1 auto !important;
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 116px !important;
}

/* -- NAV: the ONLY scrollable region -- */
body.admin-body .admin-side .admin-side-nav {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    /* required to shrink & scroll */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 12px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body.admin-body .admin-side .admin-side-nav::-webkit-scrollbar {
    width: 5px;
}

body.admin-body .admin-side .admin-side-nav::-webkit-scrollbar-track {
    background: transparent;
}

body.admin-body .admin-side .admin-side-nav::-webkit-scrollbar-thumb {
    background: rgba(232, 56, 79, .28);
    border-radius: 99px;
}

/* -- FOOT: rigid pinned block -- */
body.admin-body .admin-side .admin-side-foot {
    flex: 0 0 auto !important;
    margin: 0 !important;
    background: linear-gradient(180deg, transparent, rgba(232, 56, 79, .05));
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* first label sits clearly below the header plate */
body.admin-body .admin-side .side-label:first-child {
    margin-top: 4px !important;
}

/* mobile drawer keeps identical geometry (aside is already fixed 100dvh) */
@media (max-width: 1024px) {
    body.admin-body .admin-side .admin-side-head {
        padding: 13px 12px 12px !important;
        min-height: 66px;
    }

    body.admin-body .admin-side.open .admin-side-nav {
        padding-top: 10px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   QR SCANNER — insecure-context camera help panel
   ═══════════════════════════════════════════════════════════════ */
.qr-insecure-help {
    text-align: left;
    display: grid;
    gap: 10px;
    padding: 4px 2px;
}

.qr-insecure-help strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fde047;
    font-size: 14.5px;
    letter-spacing: .2px;
}

.qr-insecure-help p {
    margin: 0;
    color: #b7c0d4;
    font-size: 13px;
    line-height: 1.6;
}

.qr-insecure-help code {
    font-family: Consolas, monospace;
    font-size: 11.5px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 1px 6px;
    border-radius: 5px;
    color: #e7ecf5;
    overflow-wrap: anywhere;
}

.qr-insecure-help ol {
    margin: 2px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.qr-insecure-help li {
    color: #aab4c6;
    font-size: 12.5px;
    line-height: 1.55;
}

.qr-insecure-help small {
    color: #66738c;
    font-size: 11.5px;
}

.qr-https-btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    background: linear-gradient(135deg, #ff2d52, #b3123a);
    border: 1px solid rgba(255, 77, 100, .55);
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    box-shadow: 0 4px 18px rgba(232, 56, 79, .35);
    transition: transform .18s ease, box-shadow .18s ease;
}

.qr-https-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(232, 56, 79, .5);
}

/* ═══════════════════════════════════════════
   ADMIN QR SCANNER PAGE OVERRIDES (Glassmorphism & Light Theme)
   ═══════════════════════════════════════════ */
body.admin-body .qr-admin-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

body.admin-body .qr-mode-switch {
    display: inline-flex !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 16px !important;
    padding: 6px !important;
    gap: 6px !important;
    align-self: flex-start !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

body.admin-body .qr-mode-switch .qr-mode-btn {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s !important;
}

body.admin-body .qr-mode-switch .qr-mode-btn:hover {
    color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

body.admin-body .qr-mode-switch .qr-mode-btn.active {
    background: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}

body.admin-body .qr-station {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 20px !important;
    align-items: start !important;
}

body.admin-body .qr-stage {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
}

body.admin-body .qr-viewfinder {
    background: rgba(248, 250, 252, 0.8) !important;
    position: relative !important;
    min-height: 400px !important;
}

body.admin-body #qr-reader {
    border: none !important;
    box-shadow: none !important;
}

body.admin-body .qr-cam-idle {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
    max-width: 300px !important;
}

body.admin-body .qr-cam-idle i {
    color: #6366f1 !important;
    font-size: 32px !important;
    margin-bottom: 12px !important;
}

body.admin-body .qr-cam-idle strong {
    color: #0f172a !important;
    font-size: 18px !important;
}

body.admin-body .qr-cam-idle small {
    color: #64748b !important;
    font-size: 13.5px !important;
}

body.admin-body .qr-stage-bar {
    background: #ffffff !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 16px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

body.admin-body .qr-live-indicator {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

body.admin-body .qr-live-indicator.live i {
    color: #10b981 !important;
}

body.admin-body .qr-side,
body.admin-body .qr-side-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
    position: sticky !important;
    top: 20px !important;
}

body.admin-body .qr-side h3 {
    color: #1e293b !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

body.admin-body .qr-side h3 i {
    color: #6366f1 !important;
}

body.admin-body .qr-latest p {
    color: #64748b !important;
    font-size: 14px !important;
}

@media (max-width: 900px) {
    body.admin-body .qr-station {
        grid-template-columns: 1fr !important;
    }

    body.admin-body .qr-side,
    body.admin-body .qr-side-card {
        position: relative !important;
        top: 0 !important;
    }
}

/* ═══════════════════════════════════════════
   ADMIN REGISTRATION VIEW PAGE OVERRIDES (Glassmorphism & Light Theme)
   ═══════════════════════════════════════════ */
body.admin-body .pro-ticket-view {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    margin-top: 20px !important;
}

body.admin-body .pro-ticket-hero {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(255, 255, 255, 0.9)) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
    padding: 30px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

body.admin-body .pro-ticket-hero p.eyebrow {
    color: #6366f1 !important;
    text-shadow: none !important;
    letter-spacing: 1px !important;
}

body.admin-body .pro-ticket-hero h2 {
    font-size: clamp(24px, 4vw, 32px) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 4px 0 8px !important;
}

body.admin-body .pro-ticket-hero p {
    color: #64748b !important;
    font-size: 14.5px !important;
}

body.admin-body .pro-ticket-badges {
    display: flex !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

body.admin-body .pro-ticket-side {
    background: #ffffff !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

body.admin-body .pro-ticket-side img {
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body.admin-body .pro-ticket-side span {
    font-size: 12px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.admin-body .pro-ticket-side strong {
    font-size: 16px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

body.admin-body .pro-view-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px !important;
    padding: 24px 30px !important;
}

body.admin-body .pro-view-grid.lower {
    padding-top: 0 !important;
}

body.admin-body .pro-view-card {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

body.admin-body .pro-view-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
}

body.admin-body .pro-view-card.lower {
    margin: 0 30px 30px !important;
}

body.admin-body .pro-view-card h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    padding-bottom: 12px !important;
}

body.admin-body .pro-view-card h3 i {
    color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.1) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

body.admin-body .pro-detail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.admin-body .pro-detail-list div {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-radius: 10px !important;
}

body.admin-body .pro-detail-list div span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.admin-body .pro-detail-list div strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

body.admin-body .pro-detail-list div p {
    font-size: 13.5px !important;
    color: #475569 !important;
    margin-top: 2px !important;
}

body.admin-body .payment-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

body.admin-body .payment-summary-grid div {
    background: rgba(99, 102, 241, 0.05) !important;
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
    border-radius: 12px !important;
    padding: 14px 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

body.admin-body .payment-summary-grid div span {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}

body.admin-body .payment-summary-grid div strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

body.admin-body .payment-summary-grid div strong.payment-paid {
    color: #10b981 !important;
}

body.admin-body .payment-summary-grid div strong.payment-remaining {
    color: #ef4444 !important;
}

body.admin-body .pro-member-list,
body.admin-body .ticket-qr-roster {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
}

body.admin-body .pro-member-list div {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 4px !important;
}

body.admin-body .pro-member-list div strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

body.admin-body .pro-member-list div span {
    font-size: 13.5px !important;
    color: #64748b !important;
}

body.admin-body .ticket-qr-roster article {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 16px !important;
}

body.admin-body .ticket-qr-roster article img {
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    width: 60px !important;
    height: 60px !important;
    background: white !important;
    padding: 2px !important;
}

body.admin-body .ticket-qr-roster article div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.admin-body .ticket-qr-roster article strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
}

body.admin-body .ticket-qr-roster article span {
    font-size: 13px !important;
    color: #64748b !important;
}

body.admin-body a.pro-proof {
    display: flex !important;
    max-width: 200px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid rgba(99, 102, 241, 0.2) !important;
    margin-top: 16px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

body.admin-body a.pro-proof:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.2) !important;
}

body.admin-body p.muted-line {
    color: #64748b !important;
    font-size: 14px !important;
    font-style: italic !important;
    opacity: 0.8 !important;
}

@media (max-width: 800px) {
    body.admin-body .payment-summary-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    body.admin-body .pro-ticket-hero {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 24px 20px !important;
    }

    body.admin-body .pro-ticket-badges {
        justify-content: center !important;
    }

    body.admin-body .pro-view-grid {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }

    body.admin-body .pro-view-card.lower {
        margin: 0 20px 20px !important;
    }
}

/* Public navigation final lock: desktop links visible, mobile drawer closes cleanly. */
body:not(.admin-body) .nav {
    z-index: 3000 !important;
}

body:not(.admin-body) .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: clamp(16px, 3vw, 40px) !important;
    left: auto !important;
    height: 72px !important;
    width: auto !important;
    max-width: calc(100vw - 190px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 3100 !important;
}

body:not(.admin-body) .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body:not(.admin-body) .nav-links .nav-cta {
    margin: 0 0 0 8px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
}

body:not(.admin-body) .menu-toggle,
body:not(.admin-body) .sidebar-close,
body:not(.admin-body) .nav-overlay {
    display: none !important;
}

@media (max-width: 1024px) {
    body:not(.admin-body).menu-open {
        overflow: hidden !important;
        touch-action: none;
    }

    body:not(.admin-body) .menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: 14px !important;
        right: 16px !important;
        z-index: 3400 !important;
        width: 46px !important;
        height: 46px !important;
    }

    body:not(.admin-body) .nav-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 3200 !important;
        background: rgba(0, 0, 0, .62) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        pointer-events: none !important;
    }

    body:not(.admin-body).menu-open .nav-overlay {
        display: block !important;
        pointer-events: auto !important;
    }

    body:not(.admin-body) .nav-links {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(300px, 82vw) !important;
        max-width: 82vw !important;
        height: 100dvh !important;
        max-height: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 82px 0 max(24px, env(safe-area-inset-bottom)) !important;
        background:
            linear-gradient(180deg, rgba(8, 9, 12, .97), rgba(8, 9, 12, .995)),
            var(--site-nav-bg, #0c0c10) !important;
        border-left: 1px solid rgba(255, 255, 255, .1) !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, .7) !important;
        transform: translateX(105%) !important;
        visibility: hidden !important;
        overflow-y: auto !important;
        z-index: 3300 !important;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s ease !important;
    }

    body:not(.admin-body) .nav-links.open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    body:not(.admin-body) .sidebar-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 3500 !important;
    }

    body:not(.admin-body) .nav-links a {
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: 16px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
        border-radius: 0 !important;
        text-align: left !important;
    }

    body:not(.admin-body) .nav-links .nav-cta {
        justify-content: center !important;
        width: auto !important;
        margin: 18px 18px 0 !important;
        border-radius: 12px !important;
        border-bottom: 0 !important;
    }
}

/* ── Our Team public page ── */
.team-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.team-page main {
    flex: 1 0 auto;
}

.team-page footer {
    flex-shrink: 0;
}

.team-section {
    padding: clamp(40px, 6vw, 80px) 0 0 !important;
    background: transparent !important;
}

/* Nexora gaming background for Our Team page */
.team-page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, #080b12 0%, #060810 40%, #040508 100%),
        radial-gradient(600px 400px at 10% 20%, rgba(232, 56, 79, .06), transparent 70%),
        radial-gradient(500px 350px at 90% 75%, rgba(232, 56, 79, .045), transparent 65%),
        repeating-linear-gradient(145deg, transparent 0 110px, rgba(232, 56, 79, .015) 110px 111px, transparent 111px 220px),
        repeating-linear-gradient(-35deg, transparent 0 150px, rgba(232, 56, 79, .012) 150px 151px, transparent 151px 300px);
}

.team-page-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(142deg, rgba(255, 12, 42, .14) 0%, rgba(255, 12, 42, .04) 4%, transparent 18%),
        linear-gradient(-38deg, rgba(255, 12, 42, .11) 0%, rgba(255, 12, 42, .03) 5%, transparent 20%),
        linear-gradient(148deg, transparent 36%, rgba(255, 18, 48, .025) 45%, transparent 64%),
        linear-gradient(-32deg, transparent 38%, rgba(255, 15, 42, .018) 47%, transparent 62%);
}

.team-page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 25% 20% at 5% 8%, rgba(255, 15, 42, .04), transparent 70%),
        radial-gradient(ellipse 22% 18% at 95% 92%, rgba(255, 15, 42, .035), transparent 65%),
        radial-gradient(ellipse 15% 12% at 92% 6%, rgba(255, 20, 48, .02), transparent 60%),
        radial-gradient(ellipse 15% 12% at 8% 94%, rgba(255, 20, 48, .018), transparent 60%);
}

.team-section .section-heading {
    margin-bottom: clamp(18px, 3vw, 32px) !important;
}

.team-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    padding: 10px 0 !important;
}

.team-marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: team-scroll var(--team-marquee-duration, 30s) linear infinite;
}

.team-marquee:hover .team-marquee-track {
    animation-play-state: paused;
}

.team-marquee-reverse .team-marquee-track {
    animation-direction: reverse;
}

@keyframes team-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.team-member-card {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 18px 20px;
    background: linear-gradient(145deg, #1a1f2e, #141820);
    border: 1px solid rgba(232, 56, 79, 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(232, 56, 79, 0.15);
    border-color: rgba(232, 56, 79, 0.3);
}

.team-member-img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1c2233, #151b28);
    border: 2px solid rgba(232, 56, 79, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-member-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-member-fallback {
    font-size: 28px;
    font-weight: 700;
    color: #e8384f;
    letter-spacing: 1px;
}

.team-member-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}

/* Team entrance animation */
.team-section[data-team-section] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.team-section[data-team-section].team-entrance {
    opacity: 1;
    transform: translateY(0);
}

/* Static fallback grid when no rows configured */
.team-members-static {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
}

/* ── Lightbox popup for team member images ── */
.team-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}

.team-lightbox.open {
    display: flex;
}

.team-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-lightbox-inner img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
    object-fit: contain;
}

.team-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8384f;
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(232, 56, 79, 0.5);
    transition: transform .2s ease, background .2s ease;
    z-index: 10;
}

.team-lightbox-close:hover {
    background: #ff5b6c;
    transform: scale(1.1);
}

.team-lightbox-caption {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Make member image clickable */
.team-member-img {
    cursor: zoom-in;
}

/* ── Admin Team Management ── */
.team-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.team-create-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.team-create-rows {
    display: flex;
    flex-direction: column;
}

.team-section-card {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}

.team-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.team-section-head h3 {
    margin: 0;
    font-size: 17px;
    color: #fff;
}

.team-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.team-members-area {
    margin-top: 0;
}

.team-members-area h4 {
    margin: 14px 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .5);
}

.team-add-member-form {
    margin-bottom: 14px;
}

.team-add-member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.team-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.team-member-admin-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px !important;
}

.team-member-admin-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}

.team-member-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-admin-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.team-member-admin-info strong {
    font-size: 14px;
    color: #fff;
}

.team-member-admin-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.row-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.row-config-item {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.row-config-item strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .5);
}

/* Admin team responsive */
@media (max-width: 900px) {
    .team-create-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .team-member-card {
        flex: 0 0 160px !important;
        padding: 18px 14px 16px !important;
    }

    .team-member-img {
        width: 96px !important;
        height: 96px !important;
        border-radius: 10px !important;
    }

    .team-member-fallback {
        font-size: 22px !important;
    }

    .team-member-name {
        font-size: 13px !important;
    }

    .team-add-member-grid {
        grid-template-columns: 1fr;
    }

    .team-member-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .row-config-grid {
        grid-template-columns: 1fr;
    }

    .team-section-actions {
        gap: 6px;
    }
}

/* ---------------------------------------------
   PRICE DISPLAY HIERARCHY (single source: backend)
   current = prominent | original = small muted strikethrough
   --------------------------------------------- */
body:not(.admin-body) .price-line {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    justify-items: start !important;
    row-gap: 3px !important;
}

body:not(.admin-body) .price-chips p.price-line strong.price-now,
body:not(.admin-body) .price-chips strong.price-now,
body:not(.admin-body) .reg-price-tag strong.price-now,
body:not(.admin-body) .price-preview strong.price-now {
    display: block !important;
    font-size: 1.22em !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body:not(.admin-body) .price-chips del.price-was,
body:not(.admin-body) .reg-price-tag del.price-was,
body:not(.admin-body) .price-preview del.price-was {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 1px !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    opacity: 0.62 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Hero tag variant (inline row on register page): keep compact but separated */
body:not(.admin-body) .reg-price-tag {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

body:not(.admin-body) .reg-price-tag del.price-was {
    display: inline-block !important;
    margin-top: 0 !important;
}

/* Entry fee preview inside registration form */
body:not(.admin-body) .price-preview {
    display: grid !important;
    row-gap: 3px !important;
    justify-items: start !important;
}

/* -----------------------------------------------------------
   QR TICKET MODAL � MOBILE CHECK-IN FLOW (final word)
   Single-column vertical screen: header ? details ? gate/reason
   ? actions ? note. Whole modal scrolls; nothing overlaps.
   Desktop (>760px) keeps its existing spacious layout.
   ----------------------------------------------------------- */
@media (max-width: 760px) {

    /* Full-screen sheet; THE CARD itself scrolls end-to-end so
       action buttons sit AFTER the details in natural flow. */
    .qr-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .qr-overlay-card {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 !important;
        border: 0 !important;
        overscroll-behavior: contain !important;
    }

    /* Sticky header pins while scrolling but never covers content:
       it occupies its own space; the close button anchors to it. */
    .qr-overlay-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        border-radius: 0 !important;
        padding: max(14px, env(safe-area-inset-top)) 56px 12px 14px !important;
    }

    .qr-overlay-close {
        /* fixed (not absolute): stays tappable while the card scrolls */
        position: fixed !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 19px !important;
        z-index: 20 !important;
    }

    /* Details flow normally inside the scrolling card */
    .qr-overlay-body {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 12px 14px 4px !important;
        max-width: 100% !important;
    }

    .qr-person strong,
    .qr-person small,
    .qr-overlay-head h2,
    .qr-overlay-head p {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* ONE info card per row on phones � readability over compactness */
    .qr-line-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .qr-line {
        padding: 9px 11px !important;
        gap: 2px !important;
    }

    .qr-line span {
        font-size: 10.5px !important;
    }

    .qr-line strong {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    .qr-proof-link {
        margin-top: 10px !important;
        padding: 11px 13px !important;
        min-height: 44px !important;
        align-items: center !important;
        font-size: 13px !important;
    }

    /* Gate / reject-reason / override: stacked full-width controls */
    .qr-decision-fields {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 6px 0 0 !important;
        padding: 0 14px !important;
    }

    .qr-decision-fields label {
        gap: 6px !important;
        font-size: 12.5px !important;
    }

    .qr-decision-fields input,
    .qr-decision-fields select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        font-size: 15px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0 6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 34px !important;
    }

    .qr-decision-fields input[data-qr-gate],
    .qr-decision-fields input[data-qr-override-reason] {
        background-image: none !important;
        padding-right: 12px !important;
    }

    .qr-decision-fields .qr-override-field {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 44px !important;
        font-size: 13px !important;
    }

    .qr-decision-fields .qr-override-field input {
        width: 20px !important;
        height: 20px !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
    }

    /* Actions come AFTER details in normal flow � no fixed footer,
       no overlap. Stacked full-width, generous tap targets. */
    .qr-overlay-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px 14px 4px !important;
        position: static !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: 0 !important;
    }

    .qr-overlay-actions .qr-btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 13px 16px !important;
        font-size: 15px !important;
        border-radius: 13px !important;
    }

    .qr-overlay-actions .qr-btn.scan-next {
        margin-top: 6px !important;
    }

    /* Help/status message closes the flow with safe-area breathing room */
    .qr-overlay-note {
        padding: 10px 14px calc(18px + env(safe-area-inset-bottom)) !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }
}

/* Narrow phones (=480px): guarantee single-column even against older rules */
@media (max-width: 480px) {
    .qr-line-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ROLES PAGE — Assign Users Section (searchable picker)
   ═══════════════════════════════════════════════════════════════ */

body.admin-body .assign-users-section {
    margin-bottom: 20px !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
}

body.admin-body .assign-users-section .perm-group-title {
    margin-bottom: 4px !important;
}

body.admin-body .assign-users-hint {
    margin: 0 0 14px !important;
    font-size: 12.5px !important;
    color: #7c88a0 !important;
}

/* -- Search input wrapper -- */
body.admin-body .user-picker {
    position: relative !important;
}

body.admin-body .user-picker-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

body.admin-body .user-picker-input-wrap > i {
    position: absolute !important;
    left: 14px !important;
    color: #55617a !important;
    font-size: 13px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body.admin-body .user-picker-search {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 40px 10px 40px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    background: rgba(10, 13, 20, .6) !important;
    color: #e7ecf5 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    box-sizing: border-box !important;
}

body.admin-body .user-picker-search::placeholder {
    color: #55617a !important;
    font-weight: 400 !important;
}

body.admin-body .user-picker-search:focus {
    outline: none !important;
    border-color: rgba(232, 56, 79, .5) !important;
    box-shadow: 0 0 0 3px rgba(232, 56, 79, .12) !important;
}

body.admin-body .user-picker-clear {
    position: absolute !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #7c88a0 !important;
    font-size: 12px !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease !important;
    z-index: 2 !important;
}

body.admin-body .user-picker-clear:hover {
    background: rgba(232, 56, 79, .15) !important;
    color: #ff5d75 !important;
}

/* -- Dropdown list -- */
body.admin-body .user-picker-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    background: #0f131c !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55) !important;
    z-index: 100 !important;
    overscroll-behavior: contain !important;
}

body.admin-body .user-picker-dropdown::-webkit-scrollbar {
    width: 5px !important;
}

body.admin-body .user-picker-dropdown::-webkit-scrollbar-thumb {
    background: rgba(232, 56, 79, .25) !important;
    border-radius: 99px !important;
}

/* -- Each option -- */
body.admin-body .user-picker-opt {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, .04) !important;
}

body.admin-body .user-picker-opt:last-of-type {
    border-bottom: 0 !important;
}

body.admin-body .user-picker-opt:hover {
    background: rgba(232, 56, 79, .1) !important;
}

body.admin-body .user-picker-avatar {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: rgba(232, 56, 79, .12) !important;
    border: 1px solid rgba(232, 56, 79, .25) !important;
    display: grid !important;
    place-items: center !important;
    color: #ff5d75 !important;
    font-size: 12px !important;
}

body.admin-body .user-picker-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
}

body.admin-body .user-picker-info strong {
    font-size: 13.5px !important;
    color: #e7ecf5 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.admin-body .user-picker-info small {
    font-size: 11.5px !important;
    color: #7c88a0 !important;
}

body.admin-body .user-picker-already {
    flex: 0 0 auto !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #fde047 !important;
    background: rgba(253, 224, 71, .08) !important;
    border: 1px solid rgba(253, 224, 71, .25) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
}

body.admin-body .user-picker-empty {
    padding: 14px !important;
    text-align: center !important;
    color: #55617a !important;
    font-size: 13px !important;
    font-style: italic !important;
}

/* -- Selected chips area -- */
body.admin-body .user-picker-selected {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

body.admin-body .user-picker-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    background: rgba(232, 56, 79, .12) !important;
    border: 1px solid rgba(232, 56, 79, .35) !important;
    color: #ffc9d1 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    animation: chipIn .2s ease !important;
}

@keyframes chipIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

body.admin-body .user-picker-chip i {
    font-size: 11px !important;
    color: #ff5d75 !important;
}

body.admin-body .user-picker-chip button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ff8296 !important;
    font-size: 10px !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease !important;
}

body.admin-body .user-picker-chip button:hover {
    background: rgba(232, 56, 79, .3) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROLES PAGE — Assigned Users List (per existing role block)
   ═══════════════════════════════════════════════════════════════ */

body.admin-body .role-assigned-users {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .025) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    flex-wrap: wrap !important;
}

body.admin-body .role-assigned-users.role-assigned-empty {
    border-style: dashed !important;
    opacity: .7 !important;
}

body.admin-body .role-assigned-label {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #7c88a0 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 2px !important;
}

body.admin-body .role-assigned-label i {
    color: #ff5d75 !important;
    font-size: 12px !important;
}

body.admin-body .role-assigned-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.admin-body .role-assigned-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    border-radius: 10px !important;
    background: rgba(232, 56, 79, .08) !important;
    border: 1px solid rgba(232, 56, 79, .25) !important;
    color: #ffc9d1 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

body.admin-body .role-assigned-chip i {
    font-size: 10px !important;
    color: #ff5d75 !important;
}

body.admin-body .role-assigned-chip small {
    font-size: 10.5px !important;
    color: #b7c0d4 !important;
    font-weight: 400 !important;
}

/* -- Responsive: stack on mobile -- */
@media (max-width: 600px) {
    body.admin-body .role-assigned-users {
        flex-direction: column !important;
        gap: 6px !important;
    }

    body.admin-body .user-picker-dropdown {
        max-height: 200px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   REGISTRATION VIEW — Full Member Card (per-member QR + details)
   ═══════════════════════════════════════════════════════════════ */

body.admin-body .pro-member-full-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 14px !important;
}

body.admin-body .pmfc-grid {
    display: grid !important;
    gap: 14px !important;
}

body.admin-body .pmfc-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 12px !important;
    transition: border-color .2s ease !important;
}

body.admin-body .pmfc-row:hover {
    border-color: rgba(232, 56, 79, .3) !important;
}

body.admin-body .pmfc-qr {
    flex: 0 0 auto !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    padding: 4px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2) !important;
}

body.admin-body .pmfc-qr img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

body.admin-body .pmfc-qr-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #55617a !important;
    font-size: 24px !important;
}

body.admin-body .pmfc-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

body.admin-body .pmfc-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

body.admin-body .pmfc-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 16px !important;
}

body.admin-body .pmfc-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    color: #93a0b4 !important;
    white-space: nowrap !important;
}

body.admin-body .pmfc-meta span i {
    color: #ff5d75 !important;
    font-size: 11px !important;
    width: 14px !important;
    text-align: center !important;
}

body.admin-body .pro-member-full-card .pmfc-qr {
    width: 90px !important;
    height: 90px !important;
}

@media (max-width: 600px) {
    body.admin-body .pro-member-full-card {
        flex-direction: column !important;
        text-align: center !important;
    }

    body.admin-body .pmfc-row {
        flex-direction: column !important;
        text-align: center !important;
    }

    body.admin-body .pmfc-meta {
        justify-content: center !important;
    }
}

/* -- PLATFORM PILL (register page game cards) -- */
.platform-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}