* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #101010;
    color: white;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    background: #181818;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
}

nav a:hover {
    opacity: 0.7;
}

.hero {
    text-align: center;
    padding: 120px 20px;
}

.hero h2 {
    font-size: 48px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 20px;
    opacity: 0.7;
}

.button,
button {
    display: inline-block;
    background: white;
    color: black;
    border: none;
    padding: 12px 22px;
    margin-top: 15px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.button:hover {
    opacity: 0.8;
}

.section {
    padding: 50px 8%;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: #1c1c1c;
    padding: 25px;
    border-radius: 12px;
}

select {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    border-radius: 6px;
}

footer {
    text-align: center;
    padding: 30px;
    opacity: 0.5;
}

input {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 20px;

    border-radius: 6px;
    border: none;

    font-size: 16px;
}

form > label {
    display: block;
    margin-top: 10px;
    margin-bottom: 6px;
}

/* ----------------------- */
/* PRODUCT IMAGE UPLOAD */
/* ----------------------- */

.upload-box {
    width: 100%;
    max-width: 350px;
    min-height: 220px;

    border: 2px dashed #555;
    border-radius: 14px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 20px;

    margin-top: 10px;
    margin-bottom: 25px;

    cursor: pointer;

    text-align: center;

    overflow: hidden;

    background: #151515;
}

.upload-box:hover {
    border-color: #888;
}

.upload-box strong {
    font-size: 16px;
}

.upload-box span {
    opacity: 0.6;
    font-size: 14px;
}


/* IMAGE PREVIEW */

#image-preview {
    display: none;

    width: 180px;
    height: 180px;

    object-fit: contain;

    margin-top: 15px;

    border-radius: 10px;

    background: #0c0c0c;
}


/* ----------------------- */
/* SIZE SELECTOR */
/* ----------------------- */

.size-selector {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;
    margin-bottom: 25px;
}


/* REMOVE NORMAL CHECKBOX */

.size-option input {
    display: none;
}


/* SIZE BUBBLE */

.size-option {
    margin: 0;
    padding: 0;

    display: inline-block;

    cursor: pointer;
}


.size-option span {
    min-width: 52px;
    height: 44px;

    padding: 0 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #292929;

    border: 2px solid #3a3a3a;

    border-radius: 999px;

    color: white;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


/* SELECTED SIZE */

.size-option input:checked + span {
    background: #d71920;

    border-color: #ff3b42;
}


/* PC HOVER */

.size-option span:hover {
    border-color: #777;
}


/* LITTLE CLICK EFFECT */

.size-option span:active {
    transform: scale(0.95);
}


.product-image {
    width: 100%;
    max-height: 300px;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 15px;
}


#product-message {
    margin-top: 15px;
}

.shop-product-image {
    width: 100%;
    height: 280px;

    object-fit: contain;

    background: #111;

    border-radius: 12px;

    margin-bottom: 15px;
}


.product-card {
    display: flex;
    flex-direction: column;
}


.product-price {
    font-size: 20px;
    font-weight: bold;
}

.shop-product-image {
    width: 100%;
    height: 280px;
    object-fit: contain;
    background: #111;
    border-radius: 12px;
    margin-bottom: 15px;
}

.product-card {
    display: flex;
    flex-direction: column;
}

.product-price {
    font-size: 20px;
    font-weight: bold;
}

.quantity-input {
    width: 90px;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.modal-content {
    background: #181818;
    width: 100%;
    max-width: 550px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 25px;
}

.size-modal-row {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.size-product-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

.size-product-image {
    width: 65px;
    height: 65px;
    object-fit: contain;
    background: #0c0c0c;
    border-radius: 10px;
}

.size-product-placeholder {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    border-radius: 10px;
    font-size: 11px;
    opacity: 0.5;
}

.size-product-name {
    font-size: 17px;
}

.size-product-number {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.5;
}

.center-notice {
    position: fixed;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.7);

    min-width: 220px;
    max-width: 340px;

    padding: 22px;

    background: #181818;

    border: 1px solid #333;

    border-radius: 18px;

    box-shadow:
        0 15px 50px
        rgba(0, 0, 0, 0.65);

    text-align: center;

    z-index: 20000;

    opacity: 0;

    animation:
        noticePop 0.25s ease
        forwards;
}


.notice-icon {
    width: 55px;
    height: 55px;

    margin:
        0 auto
        12px auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 30px;

    font-weight: bold;
}


.center-notice.success
.notice-icon {
    background: #16883c;

    color: white;
}


.center-notice.error
.notice-icon {
    background: #d71920;

    color: white;
}


.notice-message {
    color: white;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.4;
}


.notice-hide {
    animation:
        noticeFade 0.45s ease
        forwards;
}


@keyframes noticePop {

    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.65);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


@keyframes noticeFade {

    from {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    to {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.85);
    }

}

/* =================================
   MERCH CATEGORIES
================================= */

.merch-category-section {
    margin-bottom: 55px;
}

.merch-category-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.merch-category-heading h2 {
    margin: 0;
    font-size: 30px;
}

.merch-category-heading::after {
    content: "";
    height: 2px;
    flex: 1;
    background: #292929;
}


/* =================================
   ADMIN CATEGORY MANAGER
================================= */

.admin-description {
    opacity: 0.65;
    font-size: 14px;
}

.category-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 18px 0;
}

.category-form input {
    flex: 1;
    min-width: 0;
}

.category-form button {
    width: auto;
    white-space: nowrap;
}

.category-admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.category-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 12px 15px;

    background: #202020;

    border: 1px solid #333;

    border-radius: 12px;
}

.category-admin-item span {
    font-weight: 600;
}

.delete-category-button {
    width: auto;

    padding: 8px 14px;

    background: #74161a;
}


/* =================================
   CATEGORY SELECT BUBBLES
================================= */

.category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 10px;
    margin-bottom: 25px;
}

.category-option {
    display: inline-block;
    margin: 0;
    padding: 0;

    cursor: pointer;
}

.category-option input {
    display: none;
}

.category-option span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 18px;

    background: #292929;

    border: 2px solid #3a3a3a;

    border-radius: 999px;

    color: white;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.category-option span:hover {
    border-color: #777;
}

.category-option input:checked + span {
    background: #d71920;

    border-color: #ff3b42;
}

.category-option span:active {
    transform: scale(0.95);
}


/* =================================
   MOBILE
================================= */

@media (max-width: 600px) {

    .category-form {
        flex-direction: column;
        align-items: stretch;
    }

    .category-form button {
        width: 100%;
    }

    .merch-category-heading h2 {
        font-size: 25px;
    }

}

.delete-confirm-modal {
    max-width: 420px;
    text-align: center;
}

.delete-warning-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #d71920;
    color: white;

    border-radius: 50%;

    font-size: 30px;
    font-weight: bold;
}

.delete-modal-note {
    opacity: 0.6;
    font-size: 14px;
    line-height: 1.5;
}

.cancel-delete-button {
    background: #333;
}

.confirm-delete-button {
    background: #d71920;
}

.confirm-delete-button:hover {
    background: #ef242b;
}

/* =================================
   ADMIN PRODUCT THREE-DOT MENU
================================= */

.admin-product-card {
    position: relative;
}

.product-menu-area {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
}

.product-menu-button {
    width: 44px;
    height: 44px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(20, 20, 20, 0.92);
    border: 1px solid #3a3a3a;
    border-radius: 50%;

    color: white;

    font-size: 25px;
    font-weight: bold;

    cursor: pointer;
}

.product-menu-button:hover {
    background: #292929;
}

.product-popout-menu {
    display: none;

    position: absolute;
    top: 50px;
    right: 0;

    width: 180px;

    padding: 7px;

    background: #181818;

    border: 1px solid #333;
    border-radius: 12px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.55);
}

.product-popout-menu.show {
    display: block;
}

.product-popout-menu button {
    width: 100%;

    padding: 12px 14px;

    background: transparent;
    border: none;
    border-radius: 8px;

    color: white;

    text-align: left;
    font-size: 14px;

    cursor: pointer;
}

.product-popout-menu button:hover {
    background: #292929;
}

.product-popout-menu .product-menu-delete {
    color: #ff555b;
}


/* =================================
   EDIT PRODUCT MODAL
================================= */

.edit-product-modal-content {
    max-width: 600px;
}

.edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.edit-modal-header h2 {
    margin: 0;
}

.modal-x-button {
    width: 44px;
    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #292929;

    border: 1px solid #3a3a3a;
    border-radius: 50%;

    color: white;

    font-size: 26px;

    cursor: pointer;
}

.edit-image-preview-box {
    width: 100%;

    display: flex;
    justify-content: center;

    margin: 12px 0 16px;
}

#edit-image-preview {
    display: none;

    width: 160px;
    height: 160px;

    object-fit: contain;

    background: #0c0c0c;

    border-radius: 12px;
}

.edit-upload-box {
    max-width: none;
    min-height: 110px;
}


/* MOBILE */

@media (max-width: 600px) {

    .product-popout-menu {
        width: 165px;
    }

    .edit-product-modal-content {
        padding: 20px;
    }
}

.back-to-shop {
    display: inline-block;
    margin-bottom: 20px;
    color: white;
    opacity: 0.7;
    text-decoration: none;
}

.back-to-shop:hover {
    opacity: 1;
}

/* =================================
   SHOP CATEGORY PAGE
================================= */

.merch-page-heading {
    margin-bottom: 30px;
}

.merch-page-heading h1 {
    margin-bottom: 5px;
    font-size: 38px;
}

.merch-page-heading p {
    margin: 0;
    opacity: 0.6;
}


/* CATEGORY GRID */

.shop-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );

    gap: 24px;
}


/* CATEGORY CARD */

.shop-category-card {
    display: block;

    overflow: hidden;

    background: #181818;

    border: 1px solid #292929;
    border-radius: 22px;

    color: white;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


.shop-category-card:hover {
    transform:
        translateY(-4px);

    border-color:
        #555;
}


/* CATEGORY IMAGE */

.shop-category-image-wrap {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #101010;
}


.shop-category-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}


.shop-category-card:hover
.shop-category-image {
    transform:
        scale(1.04);
}


/* NO IMAGE YET */

.shop-category-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #242424,
            #111
        );

    font-size: 70px;
    font-weight: 800;

    opacity: 0.75;
}


/* CATEGORY NAME */

.shop-category-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;
}


.shop-category-info h2 {
    margin: 0;

    font-size: 21px;
}


.shop-category-arrow {
    font-size: 24px;

    opacity: 0.55;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.shop-category-card:hover
.shop-category-arrow {
    transform:
        translateX(4px);

    opacity: 1;
}


/* EMPTY SHOP */

.empty-shop-message {
    padding: 45px 20px;

    text-align: center;

    opacity: 0.7;
}


/* MOBILE */

@media (max-width: 600px) {

    .shop-category-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 14px;
    }


    .shop-category-card {
        border-radius: 16px;
    }


    .shop-category-info {
        padding: 14px;
    }


    .shop-category-info h2 {
        font-size: 17px;
    }


    .shop-category-placeholder {
        font-size: 50px;
    }


    .merch-page-heading h1 {
        font-size: 31px;
    }
}

/* =================================
   CATEGORY IMAGE ADMIN
================================= */

.category-upload-box {
    max-width: 350px;
}


#category-image-preview {
    display: none;

    width: 180px;
    height: 180px;

    object-fit: cover;

    margin-top: 15px;

    border-radius: 14px;

    background: #0c0c0c;
}


.category-admin-left {
    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}


.category-admin-thumbnail {
    width: 65px;
    height: 65px;

    flex-shrink: 0;

    object-fit: cover;

    background: #101010;

    border-radius: 12px;
}


.category-admin-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    font-weight: 800;
}


.category-admin-buttons {
    display: flex;

    gap: 8px;
}


.category-admin-buttons button {
    width: auto;
}


#edit-category-image-preview {
    display: none;

    width: 180px;
    height: 180px;

    object-fit: cover;

    background: #0c0c0c;

    border-radius: 14px;
}


@media (max-width: 600px) {

    .category-admin-item {
        align-items: flex-start;
    }

    .category-admin-buttons {
        flex-direction: column;
    }

    .category-admin-thumbnail {
        width: 55px;
        height: 55px;
    }
}

/* =================================
   NEW SITE HEADER
================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    min-height: 85px;

    display: grid;

    grid-template-columns:
        60px
        1fr
        80px;

    align-items: center;

    gap: 15px;

    padding:
        12px
        20px;

    background:
        rgba(
            15,
            15,
            15,
            0.94
        );

    border-bottom:
        1px solid
        #292929;

    backdrop-filter:
        blur(12px);
}



/* MENU BUTTON */

.menu-button {
    width: 48px;
    height: 48px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        #202020;

    border:
        1px solid
        #333;

    border-radius:
        12px;

    color:
        white;

    font-size:
        24px;

    cursor:
        pointer;
}


.menu-button:hover {
    background:
        #292929;
}



/* BANNER */

.site-banner-link {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


.site-banner {
    display: block;

    width: auto;

    max-width: 100%;
    height: 58px;

    object-fit: contain;
}



/* CART BUTTON */

.header-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        14px;

    background:
        #202020;

    border:
        1px solid
        #333;

    border-radius:
        12px;

    color:
        white;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;
}


.header-cart-button:hover {
    background:
        #292929;
}



/* =================================
   SIDEBAR
================================= */

.site-sidebar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 5000;

    width: 290px;
    max-width: 82vw;

    height: 100vh;

    padding:
        20px;

    background:
        #151515;

    border-right:
        1px solid
        #333;

    box-shadow:
        20px
        0
        50px
        rgba(
            0,
            0,
            0,
            0.5
        );

    transform:
        translateX(
            -105%
        );

    transition:
        transform
        0.25s
        ease;
}


.site-sidebar.open {
    transform:
        translateX(0);
}



/* SIDEBAR HEADER */

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        30px;

    font-size:
        22px;

    font-weight:
        700;
}


.sidebar-close-button {
    width: 44px;
    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        #252525;

    border:
        1px solid
        #333;

    border-radius:
        50%;

    color:
        white;

    font-size:
        26px;

    cursor:
        pointer;
}



/* SIDEBAR LINKS */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.sidebar-nav a {
    display: flex;
    align-items: center;

    min-height: 52px;

    padding:
        0
        16px;

    border-radius:
        12px;

    color:
        white;

    text-decoration:
        none;

    font-size:
        17px;

    font-weight:
        600;
}


.sidebar-nav a:hover {
    background:
        #242424;
}



/* BACKDROP */

.sidebar-backdrop {
    position: fixed;

    inset: 0;

    z-index: 4000;

    background:
        rgba(
            0,
            0,
            0,
            0.65
        );

    opacity: 0;

    pointer-events:
        none;

    transition:
        opacity
        0.25s
        ease;
}


.sidebar-backdrop.show {
    opacity: 1;

    pointer-events:
        auto;
}



body.menu-open {
    overflow:
        hidden;
}



/* MOBILE */

@media
(max-width: 600px) {

    .site-header {
        min-height:
            72px;

        grid-template-columns:
            52px
            1fr
            65px;

        padding:
            9px
            12px;
    }


    .menu-button {
        width:
            44px;

        height:
            44px;
    }


    .site-banner {
        height:
            46px;
    }


    .header-cart-button {
        padding:
            0
            10px;

        font-size:
            13px;
    }


    .site-sidebar {
        width:
            270px;
    }
}

/* =================================
   SITE HEADER
================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    min-height: 85px;

    display: grid;

    grid-template-columns:
        60px
        1fr
        80px;

    align-items: center;

    gap: 15px;

    padding:
        12px
        20px;

    background:
        rgba(
            15,
            15,
            15,
            0.94
        );

    border-bottom:
        1px solid
        #292929;

    backdrop-filter:
        blur(12px);
}



/* =================================
   MENU BUTTON
================================= */

.menu-button {
    width: 48px;
    height: 48px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        #202020;

    border:
        1px solid
        #333;

    border-radius:
        12px;

    color:
        white;

    font-size:
        24px;

    cursor:
        pointer;
}


.menu-button:hover {
    background:
        #292929;
}



/* =================================
   CENTER PLACEHOLDER
================================= */

.site-banner-link {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    text-decoration: none;
}


.site-name-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;

    padding:
        0
        25px;

    color: white;

    font-size: 24px;
    font-weight: 800;

    letter-spacing: 2px;

    text-align: center;
}



/* =================================
   CART BUTTON
================================= */

.header-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        14px;

    background:
        #202020;

    border:
        1px solid
        #333;

    border-radius:
        12px;

    color:
        white;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
}


.header-cart-button:hover {
    background:
        #292929;
}



/* =================================
   SIDEBAR
================================= */

.site-sidebar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 5000;

    width: 290px;
    max-width: 82vw;

    height: 100vh;

    padding:
        20px;

    background:
        #151515;

    border-right:
        1px solid
        #333;

    box-shadow:
        20px
        0
        50px
        rgba(
            0,
            0,
            0,
            0.5
        );

    transform:
        translateX(
            -105%
        );

    transition:
        transform
        0.25s
        ease;
}


.site-sidebar.open {
    transform:
        translateX(0);
}



/* =================================
   SIDEBAR HEADER
================================= */

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        30px;

    font-size:
        22px;

    font-weight:
        700;
}


.sidebar-close-button {
    width: 44px;
    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        #252525;

    border:
        1px solid
        #333;

    border-radius:
        50%;

    color:
        white;

    font-size:
        26px;

    cursor:
        pointer;
}



/* =================================
   SIDEBAR LINKS
================================= */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.sidebar-nav a {
    display: flex;
    align-items: center;

    min-height: 52px;

    padding:
        0
        16px;

    border-radius:
        12px;

    color:
        white;

    text-decoration:
        none;

    font-size:
        17px;

    font-weight:
        600;
}


.sidebar-nav a:hover {
    background:
        #242424;
}



/* =================================
   SIDEBAR BACKDROP
================================= */

.sidebar-backdrop {
    position: fixed;

    inset: 0;

    z-index: 4000;

    background:
        rgba(
            0,
            0,
            0,
            0.65
        );

    opacity: 0;

    pointer-events:
        none;

    transition:
        opacity
        0.25s
        ease;
}


.sidebar-backdrop.show {
    opacity: 1;

    pointer-events:
        auto;
}


body.menu-open {
    overflow:
        hidden;
}



/* =================================
   MOBILE
================================= */

@media
(max-width: 600px) {

    .site-header {
        min-height:
            72px;

        grid-template-columns:
            52px
            1fr
            65px;

        padding:
            9px
            12px;
    }


    .menu-button {
        width:
            44px;

        height:
            44px;
    }


    .site-name-placeholder {
        min-height:
            46px;

        padding:
            0
            10px;

        font-size:
            18px;

        letter-spacing:
            1px;
    }


    .header-cart-button {
        padding:
            0
            10px;

        font-size:
            13px;
    }


    .site-sidebar {
        width:
            270px;
    }
}

/* =================================
   HOME HERO
================================= */

.hero {
    min-height: 460px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 20px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #171717,
            #0d0d0d
        );
}


.hero-content {
    max-width: 700px;
}


.hero-content h1 {
    margin-bottom: 10px;

    font-size: 48px;
}


.hero-content p {
    margin-bottom: 25px;

    font-size: 18px;

    opacity: 0.7;
}


.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    background: #d71920;

    border-radius: 12px;

    color: white;

    text-decoration: none;

    font-weight: 700;
}


.hero-button:hover {
    background: #ef242b;
}



/* =================================
   ANNOUNCEMENT
================================= */

.announcement-card {
    max-width: 750px;
}



/* =================================
   CART
================================= */

.cart-summary {
    margin-top: 30px;

    padding: 22px;

    background: #181818;

    border: 1px solid #292929;

    border-radius: 16px;
}


.cart-summary h2 {
    margin-top: 0;
}


.cart-total {
    font-size: 26px;

    font-weight: 800;
}


#checkout-button {
    width: 100%;

    min-height: 48px;

    margin-top: 10px;
}



/* =================================
   MOBILE
================================= */

@media (max-width: 600px) {

    .hero {
        min-height: 360px;

        padding: 45px 20px;
    }


    .hero-content h1 {
        font-size: 36px;
    }


    .hero-content p {
        font-size: 16px;
    }
}

/* =================================
   CUSTOMER SUPPORT
================================= */

.support-page {
    max-width: 1100px;

    margin:
        0
        auto;
}



/* SUPPORT HEADER */

.support-heading {
    max-width: 700px;

    margin:
        20px
        auto
        50px;

    text-align: center;
}


.support-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #ff3b42;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;
}


.support-heading h1 {
    margin:
        0
        0
        12px;

    font-size: 44px;
}


.support-heading p {
    margin: 0;

    font-size: 17px;

    line-height: 1.6;

    opacity: 0.65;
}



/* QUICK OPTIONS */

.support-options {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 15px;

    margin-bottom: 65px;
}


.support-option-card {
    padding: 25px;

    background: #181818;

    border:
        1px solid
        #292929;

    border-radius: 18px;

    text-align: center;
}


.support-option-icon {
    margin-bottom: 12px;

    font-size: 30px;
}


.support-option-card h3 {
    margin:
        0
        0
        8px;
}


.support-option-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.5;

    opacity: 0.6;
}



/* SUPPORT SECTIONS */

.support-section {
    margin-bottom: 70px;
}


.support-section-heading {
    margin-bottom: 25px;
}


.support-section-heading > span {
    display: block;

    margin-bottom: 7px;

    color: #ff3b42;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.support-section-heading h2 {
    margin:
        0
        0
        8px;

    font-size: 30px;
}


.support-section-heading p {
    margin: 0;

    opacity: 0.6;
}



/* FAQ */

.faq-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.faq-item {
    overflow: hidden;

    background: #181818;

    border:
        1px solid
        #292929;

    border-radius: 14px;
}


.faq-item summary {
    padding: 20px;

    cursor: pointer;

    font-weight: 700;

    list-style: none;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::after {
    content: "+";

    float: right;

    margin-left: 15px;

    font-size: 21px;

    opacity: 0.6;
}


.faq-item[open] summary::after {
    content: "−";
}


.faq-item p {
    margin: 0;

    padding:
        0
        20px
        20px;

    line-height: 1.6;

    opacity: 0.65;
}



/* SUPPORT FORM */

.support-form {
    padding: 28px;

    background: #181818;

    border:
        1px solid
        #292929;

    border-radius: 18px;
}


.support-form-row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 18px;
}


.support-field {
    margin-bottom: 20px;
}


.support-field label {
    display: block;

    margin:
        0
        0
        8px;

    font-size: 14px;

    font-weight: 700;
}


.support-field input,
.support-field select,
.support-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    background: #101010;

    border:
        1px solid
        #333;

    border-radius: 10px;

    color: white;

    font: inherit;

    outline: none;
}


.support-field textarea {
    resize: vertical;

    min-height: 150px;
}


.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
    border-color: #777;
}


.support-submit-button {
    width: 100%;

    min-height: 50px;

    background: #d71920;

    border-radius: 12px;

    color: white;

    font-weight: 700;

    cursor: pointer;
}


.support-submit-button:hover {
    background: #ef242b;
}


.support-form-note {
    margin:
        14px
        0
        0;

    text-align: center;

    font-size: 12px;

    opacity: 0.45;
}



/* SUPPORT MOBILE */

@media (max-width: 800px) {

    .support-options {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

}


@media (max-width: 600px) {

    .support-heading h1 {
        font-size: 34px;
    }


    .support-options {
        grid-template-columns:
            1fr;
    }


    .support-form-row {
        grid-template-columns:
            1fr;

        gap: 0;
    }


    .support-form {
        padding: 20px;
    }

}

[hidden] { display: none !important; }

.admin-body { margin: 0; background: #0d0d0d; color: white; }
.admin-auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 18px; box-sizing: border-box; }
.admin-auth-card { width: 100%; max-width: 430px; padding: 32px; background: #171717; border: 1px solid #2d2d2d; border-radius: 20px; }
.admin-auth-card h1 { margin: 5px 0 8px; }
.admin-auth-card p { opacity: .62; line-height: 1.55; }
.admin-auth-card input, .admin-auth-card select, .admin-panel input, .admin-panel select, .admin-search, .modal-content input { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 14px; background: #0f0f0f; border: 1px solid #333; border-radius: 10px; color: white; font: inherit; }
.admin-auth-card button, .admin-panel button { min-height: 44px; }
.admin-back-store { display: inline-block; margin-top: 18px; color: white; text-decoration: none; opacity: .6; }
.admin-eyebrow { color: #ff3b42; font-size: 12px; font-weight: 800; letter-spacing: 1.7px; }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 265px minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px 16px; background: #121212; border-right: 1px solid #292929; }
.admin-brand { padding: 0 10px 26px; display: flex; gap: 7px; align-items: baseline; }
.admin-brand span { opacity: .45; letter-spacing: 2px; }
.admin-brand strong { font-size: 22px; }
.admin-nav { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.admin-nav-label { display: block; margin: 22px 10px 7px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; opacity: .38; }
.admin-nav-button { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: transparent; border: 0; border-radius: 10px; color: white; text-align: left; cursor: pointer; }
.admin-nav-button:hover, .admin-nav-button.active { background: #242424; }
.admin-count { min-width: 24px; padding: 3px 7px; background: #303030; border-radius: 999px; text-align: center; font-size: 11px; }
.admin-user-card { margin-top: auto; padding: 15px; background: #1b1b1b; border: 1px solid #2b2b2b; border-radius: 14px; }
.admin-user-card strong, .admin-user-card span { display: block; }
.admin-user-card span { margin-top: 3px; opacity: .5; font-size: 12px; }
.admin-user-card button { width: 100%; margin-top: 12px; background: #292929; }

.admin-main { min-width: 0; padding: 35px; }
.admin-view { max-width: 1250px; margin: 0 auto; }
.admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.admin-page-heading h1 { margin: 5px 0 0; font-size: 36px; }
.admin-page-heading a { color: white; text-decoration: none; opacity: .6; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-stat-grid article { padding: 22px; background: #181818; border: 1px solid #292929; border-radius: 16px; }
.admin-stat-grid span { display: block; margin-bottom: 15px; opacity: .55; }
.admin-stat-grid strong { font-size: 38px; }
.admin-info-card, .admin-panel { margin-top: 22px; padding: 24px; background: #181818; border: 1px solid #292929; border-radius: 16px; }
.admin-info-card p { opacity: .6; line-height: 1.6; }
.admin-two-column { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.5fr); gap: 22px; align-items: start; }
.admin-two-column .admin-panel { margin-top: 0; }
.admin-panel h2 { margin-top: 0; }

.admin-search { max-width: 620px; margin-bottom: 22px; }
.admin-ticket-list { display: flex; flex-direction: column; gap: 12px; }
.admin-ticket-card { padding: 20px; background: #181818; border: 1px solid #292929; border-left: 4px solid #3d3d3d; border-radius: 15px; }
.admin-ticket-card.urgency-attention { border-left-color: #c18b27; }
.admin-ticket-card.urgency-urgent { border-left-color: #d71920; }
.ticket-card-top, .ticket-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.ticket-status { padding: 5px 9px; border-radius: 999px; background: #2b2b2b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.ticket-status.received { background: #352f1f; }
.ticket-status.in_process { background: #1c3142; }
.ticket-status.resolved { background: #1c3b29; }
.ticket-topic { margin-top: 18px; color: #ff6a70; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.admin-ticket-card h3 { margin: 5px 0 3px; font-size: 20px; }
.ticket-meta, .ticket-preview { opacity: .58; }
.ticket-preview { line-height: 1.5; }
.ticket-card-bottom { padding-top: 15px; border-top: 1px solid #292929; }
.ticket-live-time { font-weight: 800; }
.ticket-card-bottom button { width: auto; }
.admin-empty { padding: 45px 15px; text-align: center; opacity: .5; }

.admin-ticket-modal { max-width: 760px; }
.ticket-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ticket-detail-grid > div, .ticket-message-box { padding: 14px; background: #111; border: 1px solid #292929; border-radius: 11px; }
.ticket-detail-grid span, .ticket-message-box > span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: .45; text-transform: uppercase; }
.ticket-message-box { margin-top: 15px; }
.ticket-message-box p { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.ticket-timeline-wrap { margin-top: 20px; }
.timeline-row { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #292929; }
.timeline-row span { opacity: .55; text-align: right; }

.employee-list { display: flex; flex-direction: column; gap: 10px; }
.employee-row { padding: 15px; background: #111; border: 1px solid #292929; border-radius: 11px; }
.employee-row strong, .employee-row span { display: block; }
.employee-row span { margin-top: 4px; opacity: .5; font-size: 13px; }
.admin-product-actions { display: flex; gap: 8px; margin-top: auto; }
.admin-product-actions button { width: auto; }
.danger-button { background: #74161a !important; }

@media (max-width: 950px) {
    .admin-shell { grid-template-columns: 210px minmax(0, 1fr); }
    .admin-main { padding: 25px 18px; }
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .admin-shell { display: block; }
    .admin-sidebar { position: static; width: 100%; height: auto; }
    .admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-nav-label { grid-column: 1 / -1; }
    .admin-user-card { margin-top: 20px; }
    .admin-main { padding: 22px 12px; }
    .admin-page-heading { align-items: flex-start; flex-direction: column; }
    .admin-page-heading h1 { font-size: 30px; }
    .admin-stat-grid { grid-template-columns: 1fr 1fr; }
    .ticket-detail-grid { grid-template-columns: 1fr; }
    .timeline-row { flex-direction: column; }
    .timeline-row span { text-align: left; }
}

/* APPEND THIS WHOLE BLOCK TO THE BOTTOM OF style.css */

[hidden] { display: none !important; }

.admin-body { margin: 0; background: #0d0d0d; color: white; }
.admin-auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 18px; box-sizing: border-box; }
.admin-auth-card { width: 100%; max-width: 430px; padding: 32px; background: #171717; border: 1px solid #2d2d2d; border-radius: 20px; }
.admin-auth-card h1 { margin: 5px 0 8px; }
.admin-auth-card p { opacity: .62; line-height: 1.55; }
.admin-auth-card input, .admin-auth-card select, .admin-panel input, .admin-panel select, .admin-search, .modal-content input { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 14px; background: #0f0f0f; border: 1px solid #333; border-radius: 10px; color: white; font: inherit; }
.admin-auth-card button, .admin-panel button { min-height: 44px; }
.admin-back-store { display: inline-block; margin-top: 18px; color: white; text-decoration: none; opacity: .6; }
.admin-eyebrow { color: #ff3b42; font-size: 12px; font-weight: 800; letter-spacing: 1.7px; }

.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 265px minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px 16px; background: #121212; border-right: 1px solid #292929; }
.admin-brand { padding: 0 10px 26px; display: flex; gap: 7px; align-items: baseline; }
.admin-brand span { opacity: .45; letter-spacing: 2px; }
.admin-brand strong { font-size: 22px; }
.admin-nav { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.admin-nav-label { display: block; margin: 22px 10px 7px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; opacity: .38; }
.admin-nav-button { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: transparent; border: 0; border-radius: 10px; color: white; text-align: left; cursor: pointer; }
.admin-nav-button:hover, .admin-nav-button.active { background: #242424; }
.admin-count { min-width: 24px; padding: 3px 7px; background: #303030; border-radius: 999px; text-align: center; font-size: 11px; }
.admin-user-card { margin-top: auto; padding: 15px; background: #1b1b1b; border: 1px solid #2b2b2b; border-radius: 14px; }
.admin-user-card strong, .admin-user-card span { display: block; }
.admin-user-card span { margin-top: 3px; opacity: .5; font-size: 12px; }
.admin-user-card button { width: 100%; margin-top: 12px; background: #292929; }

.admin-main { min-width: 0; padding: 35px; }
.admin-view { max-width: 1250px; margin: 0 auto; }
.admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.admin-page-heading h1 { margin: 5px 0 0; font-size: 36px; }
.admin-page-heading a { color: white; text-decoration: none; opacity: .6; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-stat-grid article { padding: 22px; background: #181818; border: 1px solid #292929; border-radius: 16px; }
.admin-stat-grid span { display: block; margin-bottom: 15px; opacity: .55; }
.admin-stat-grid strong { font-size: 38px; }
.admin-info-card, .admin-panel { margin-top: 22px; padding: 24px; background: #181818; border: 1px solid #292929; border-radius: 16px; }
.admin-info-card p { opacity: .6; line-height: 1.6; }
.admin-two-column { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.5fr); gap: 22px; align-items: start; }
.admin-two-column .admin-panel { margin-top: 0; }
.admin-panel h2 { margin-top: 0; }

.admin-search { max-width: 620px; margin-bottom: 22px; }
.admin-ticket-list { display: flex; flex-direction: column; gap: 12px; }
.admin-ticket-card { padding: 20px; background: #181818; border: 1px solid #292929; border-left: 4px solid #3d3d3d; border-radius: 15px; }
.admin-ticket-card.urgency-attention { border-left-color: #c18b27; }
.admin-ticket-card.urgency-urgent { border-left-color: #d71920; }
.ticket-card-top, .ticket-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.ticket-status { padding: 5px 9px; border-radius: 999px; background: #2b2b2b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.ticket-status.received { background: #352f1f; }
.ticket-status.in_process { background: #1c3142; }
.ticket-status.resolved { background: #1c3b29; }
.ticket-topic { margin-top: 18px; color: #ff6a70; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.admin-ticket-card h3 { margin: 5px 0 3px; font-size: 20px; }
.ticket-meta, .ticket-preview { opacity: .58; }
.ticket-preview { line-height: 1.5; }
.ticket-card-bottom { padding-top: 15px; border-top: 1px solid #292929; }
.ticket-live-time { font-weight: 800; }
.ticket-card-bottom button { width: auto; }
.admin-empty { padding: 45px 15px; text-align: center; opacity: .5; }

.admin-ticket-modal { max-width: 760px; }
.ticket-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ticket-detail-grid > div, .ticket-message-box { padding: 14px; background: #111; border: 1px solid #292929; border-radius: 11px; }
.ticket-detail-grid span, .ticket-message-box > span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px; opacity: .45; text-transform: uppercase; }
.ticket-message-box { margin-top: 15px; }
.ticket-message-box p { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.ticket-timeline-wrap { margin-top: 20px; }
.timeline-row { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #292929; }
.timeline-row span { opacity: .55; text-align: right; }

.employee-list { display: flex; flex-direction: column; gap: 10px; }
.employee-row { padding: 15px; background: #111; border: 1px solid #292929; border-radius: 11px; }
.employee-row strong, .employee-row span { display: block; }
.employee-row span { margin-top: 4px; opacity: .5; font-size: 13px; }
.admin-product-actions { display: flex; gap: 8px; margin-top: auto; }
.admin-product-actions button { width: auto; }
.danger-button { background: #74161a !important; }

@media (max-width: 950px) {
    .admin-shell { grid-template-columns: 210px minmax(0, 1fr); }
    .admin-main { padding: 25px 18px; }
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .admin-shell { display: block; }
    .admin-sidebar { position: static; width: 100%; height: auto; }
    .admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-nav-label { grid-column: 1 / -1; }
    .admin-user-card { margin-top: 20px; }
    .admin-main { padding: 22px 12px; }
    .admin-page-heading { align-items: flex-start; flex-direction: column; }
    .admin-page-heading h1 { font-size: 30px; }
    .admin-stat-grid { grid-template-columns: 1fr 1fr; }
    .ticket-detail-grid { grid-template-columns: 1fr; }
    .timeline-row { flex-direction: column; }
    .timeline-row span { text-align: left; }
}


/* ACCOUNT / PROFILE */
.admin-link-button {
    width: auto;
    padding: 8px 0;
    margin-top: 10px;
    background: transparent;
    border: 0;
    color: white;
    opacity: .65;
    text-align: left;
    cursor: pointer;
}
.admin-link-button:hover { opacity: 1; }
.admin-user-card #profile-button {
    width: 100%;
    margin-top: 10px;
    background: #292929;
}
.admin-muted { opacity: .6; line-height: 1.55; }

.account-entry-page { max-width: 760px; margin: 0 auto; padding: 50px 20px 80px; }
.account-entry-heading { text-align: center; margin-bottom: 28px; }
.account-entry-heading > span { color: #ff3b42; font-size: 12px; font-weight: 800; letter-spacing: 1.8px; }
.account-entry-heading h1 { margin: 8px 0 10px; font-size: 42px; }
.account-entry-heading p { margin: 0 auto; max-width: 580px; opacity: .6; line-height: 1.6; }
.account-type-switch, .account-form-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; background: #151515; border: 1px solid #292929; border-radius: 14px; margin-bottom: 18px; }
.account-tab, .account-form-switch button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: white; font-weight: 700; cursor: pointer; }
.account-tab.active, .account-form-switch button.active { background: #2a2a2a; }
.account-auth-card { padding: 28px; background: #181818; border: 1px solid #292929; border-radius: 18px; }
.account-auth-card h2 { margin-top: 0; }
.account-auth-card label { display: block; margin: 13px 0 7px; font-weight: 700; }
.account-auth-card input { width: 100%; box-sizing: border-box; padding: 13px 14px; background: #101010; border: 1px solid #333; border-radius: 10px; color: white; font: inherit; }
.account-primary-link { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; background: #d71920; border-radius: 11px; color: white; text-decoration: none; font-weight: 800; }
.account-secondary-button { width: 100%; min-height: 46px; margin-top: 14px; background: #292929; color: white; border: 1px solid #3a3a3a; border-radius: 11px; cursor: pointer; }
.account-text-button { width: 100%; margin-top: 12px; background: transparent; border: 0; color: white; opacity: .65; cursor: pointer; }
.account-help-text { opacity: .58; line-height: 1.55; }
@media (max-width: 600px) { .account-entry-page { padding: 32px 14px 60px; } .account-entry-heading h1 { font-size: 34px; } .account-auth-card { padding: 20px; } }


/* =========================================================
   REDCUPVONDY TACTICAL LOBBY HOMEPAGE
   Only lobby classes are changed. Login/admin/store remain intact.
   ========================================================= */

body.lobby-body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #070a0f;
    color: #f6f8fb;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.lobby-body * { box-sizing: border-box; }

.lobby-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 3000;
    height: 58px;
    display: grid;
    grid-template-columns: minmax(220px,.85fr) minmax(430px,1.45fr) minmax(220px,.8fr);
    align-items: stretch;
    padding: 0 16px;
    background: rgba(7,10,15,.94);
    border-bottom: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(15px);
}

.lobby-brand-area,
.lobby-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lobby-icon-button {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 2px;
    background: rgba(255,255,255,.04);
    color: white;
}

.lobby-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: white;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: -.04em;
}

.lobby-brand-mark {
    width: 40px;
    height: 29px;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg,#bc1b2c 0 33%,#f2f3f5 33% 66%,#1d4f86 66%);
    border: 1px solid rgba(255,255,255,.35);
    color: #080b10;
    font-size: 10px;
    font-weight: 1000;
}

.lobby-tabs {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.lobby-tabs a {
    position: relative;
    min-width: 92px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
}

.lobby-tabs a:hover,
.lobby-tabs a.active {
    color: white;
    background: rgba(255,255,255,.035);
}

.lobby-tabs a.active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,#c71e31,#f5f5f5,#245c98);
}

.lobby-top-actions { justify-content: flex-end; }

.lobby-top-action {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    color: white;
    text-decoration: none;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.lobby-top-action span {
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #bc1b2c;
}

.lobby-main {
    position: relative;
    min-height: 100vh;
    padding: 78px 22px 52px;
    display: grid;
    grid-template-columns: 280px minmax(400px,1fr) 270px;
    gap: 22px;
    isolation: isolate;
}

.lobby-scene {
    position: absolute;
    inset: 58px 0 0;
    z-index: -5;
    overflow: hidden;
    background:
        linear-gradient(90deg,rgba(5,8,13,.96),rgba(5,8,13,.6) 28%,rgba(7,12,18,.18) 52%,rgba(5,8,13,.62) 78%,rgba(5,8,13,.96)),
        linear-gradient(180deg,#121a24,#0a1017 52%,#070a0f);
}

.lobby-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size: 54px 54px;
    transform: perspective(650px) rotateX(68deg) scale(1.8) translateY(28%);
    transform-origin: center bottom;
}

.lobby-red-light,
.lobby-blue-light {
    position: absolute;
    width: 44vw;
    height: 44vw;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .15;
}

.lobby-red-light { left: 22%; top: 18%; background: #c1162a; }
.lobby-blue-light { right: 5%; top: 22%; background: #1d5796; }

.lobby-left,
.lobby-right { align-self: start; z-index: 2; }

.lobby-feature {
    display: block;
    margin-bottom: 10px;
    background: rgba(9,14,20,.87);
    border: 1px solid rgba(255,255,255,.22);
    color: white;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(0,0,0,.3);
}

.lobby-feature-art {
    position: relative;
    height: 120px;
    overflow: hidden;
    background:
        linear-gradient(125deg,rgba(190,24,43,.82),rgba(20,28,39,.3) 48%,rgba(27,78,132,.82)),
        repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 10px);
}

.lobby-feature-art > span {
    position: absolute;
    right: -8px;
    bottom: -27px;
    color: rgba(255,255,255,.12);
    font-size: 92px;
    font-weight: 1000;
    letter-spacing: -.08em;
}

.lobby-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 76px;
    height: 5px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.lobby-flag i:nth-child(1) { background:#c51e31; }
.lobby-flag i:nth-child(2) { background:#f4f4f4; }
.lobby-flag i:nth-child(3) { background:#22588f; }

.lobby-feature > small,
.lobby-feature > strong {
    display: block;
    padding-left: 13px;
    padding-right: 13px;
}

.lobby-feature > small {
    padding-top: 10px;
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
}

.lobby-feature > strong {
    padding-top: 3px;
    padding-bottom: 12px;
    font-size: 14px;
    letter-spacing: .05em;
}

.lobby-menu-item {
    position: relative;
    min-height: 56px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
    background: linear-gradient(90deg,rgba(18,23,31,.94),rgba(12,17,24,.76));
    border: 1px solid rgba(255,255,255,.08);
    border-top: 0;
    color: white;
    text-decoration: none;
    transition: .14s ease;
}

.lobby-menu-item::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:transparent;
}

.lobby-menu-item:hover,
.lobby-menu-item.active {
    transform: translateX(4px);
    background: linear-gradient(90deg,rgba(35,48,63,.98),rgba(15,22,30,.88));
    border-color: rgba(255,255,255,.25);
}

.lobby-menu-item:hover::before,
.lobby-menu-item.active::before {
    background: linear-gradient(#c51e31,#f4f4f4,#22588f);
}

.lobby-menu-item > b {
    color: rgba(255,255,255,.28);
    font-size: 9px;
}

.lobby-menu-item span strong,
.lobby-menu-item span small { display:block; }

.lobby-menu-item span strong {
    font-size: 12px;
    letter-spacing: .06em;
}

.lobby-menu-item span small {
    margin-top:2px;
    color:rgba(255,255,255,.38);
    font-size:8px;
}

.lobby-center {
    position: relative;
    min-height: calc(100vh - 145px);
}

.lobby-system-status {
    position:absolute;
    top:0;
    left:15px;
    color:rgba(255,255,255,.4);
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.lobby-system-status i {
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
    background:#4fd37b;
    box-shadow:0 0 12px rgba(79,211,123,.7);
}

.lobby-system-status b { color:#89d9a4; }

.lobby-title {
    position:absolute;
    left:50%;
    top:7%;
    z-index:3;
    width:min(600px,92%);
    transform:translateX(-50%);
    text-align:center;
}

.lobby-title small {
    color:rgba(255,255,255,.4);
    font-size:8px;
    font-weight:900;
    letter-spacing:.22em;
}

.lobby-title h1 {
    margin:4px 0 0;
    font-size:clamp(42px,5vw,74px);
    line-height:.92;
    letter-spacing:-.065em;
    text-shadow:0 12px 40px rgba(0,0,0,.8);
}

.lobby-title h1 span { color:#d22438; }

.lobby-title p {
    margin:10px 0 0;
    color:rgba(255,255,255,.48);
    font-size:9px;
    font-weight:900;
    letter-spacing:.2em;
}

.lobby-creator-stage {
    position:absolute;
    left:50%;
    bottom:88px;
    width:min(500px,66vw);
    height:min(62vh,620px);
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.lobby-stage-ring {
    position:absolute;
    width:72%;
    aspect-ratio:1;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
    box-shadow:0 0 0 55px rgba(255,255,255,.012),0 0 0 110px rgba(255,255,255,.007);
}

.lobby-monogram {
    color:rgba(255,255,255,.085);
    font-size:clamp(110px,15vw,210px);
    font-weight:1000;
    letter-spacing:-.1em;
}

.lobby-photo-note {
    position:absolute;
    bottom:14%;
    left:50%;
    width:215px;
    padding:8px 10px;
    transform:translateX(-50%);
    background:rgba(7,10,15,.68);
    border-left:2px solid #c51d31;
    color:rgba(255,255,255,.6);
    text-align:center;
    font-size:8px;
    font-weight:900;
    letter-spacing:.09em;
}

.lobby-photo-note small {
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.32);
    font-size:7px;
    letter-spacing:0;
}

.lobby-update {
    position:absolute;
    left:15px;
    right:15px;
    bottom:5px;
    min-height:76px;
    padding:12px 15px;
    display:grid;
    grid-template-columns:minmax(110px,.55fr) minmax(240px,1.5fr) auto;
    gap:16px;
    align-items:center;
    background:linear-gradient(90deg,rgba(15,21,29,.95),rgba(10,15,21,.84));
    border:1px solid rgba(255,255,255,.12);
    border-left:3px solid #c21b2f;
    backdrop-filter:blur(12px);
}

.lobby-update div:first-child small,
.lobby-update div:first-child span { display:block; }

.lobby-update div:first-child small {
    color:#e34455;
    font-size:8px;
    font-weight:1000;
    letter-spacing:.15em;
}

.lobby-update div:first-child span {
    margin-top:3px;
    color:rgba(255,255,255,.3);
    font-size:7px;
}

.lobby-update h2 {
    margin:0 0 4px;
    font-size:13px;
}

.lobby-update p {
    margin:0;
    color:rgba(255,255,255,.43);
    font-size:9px;
}

.lobby-update > a {
    min-height:34px;
    padding:0 11px;
    display:flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);
    color:white;
    text-decoration:none;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.lobby-right {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.lobby-panel,
.lobby-mini-status {
    background:rgba(9,14,20,.84);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(12px);
}

.lobby-panel > header {
    min-height:48px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.lobby-panel > header div small,
.lobby-panel > header div strong { display:block; }

.lobby-panel > header div small {
    color:rgba(255,255,255,.34);
    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
}

.lobby-panel > header div strong {
    margin-top:2px;
    font-size:11px;
}

.lobby-panel > header > span {
    color:rgba(255,255,255,.34);
    font-size:7px;
    font-weight:900;
    letter-spacing:.1em;
}

#lobby-profile-state.online { color:#57d581; }

.lobby-profile {
    padding:12px;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;
    align-items:center;
}

.lobby-avatar {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#a91d2d,#214c7a);
    border:1px solid rgba(255,255,255,.25);
    font-weight:1000;
}

.lobby-profile > div:last-child strong,
.lobby-profile > div:last-child small { display:block; }

.lobby-profile > div:last-child strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}

.lobby-profile > div:last-child small {
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(255,255,255,.34);
    font-size:7px;
}

.lobby-panel-button {
    margin:0 11px 11px;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
    color:white;
    text-decoration:none;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.lobby-quick {
    min-height:52px;
    padding:7px 10px;
    display:grid;
    grid-template-columns:34px 1fr auto;
    gap:9px;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:white;
    text-decoration:none;
}

.lobby-quick:hover { background:rgba(255,255,255,.045); }

.lobby-quick > b {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    background:#161e28;
    border:1px solid rgba(255,255,255,.12);
    font-size:9px;
}

.lobby-quick span strong,
.lobby-quick span small { display:block; }

.lobby-quick span strong { font-size:10px; }
.lobby-quick span small { margin-top:2px;color:rgba(255,255,255,.32);font-size:7px; }
.lobby-quick > i { color:rgba(255,255,255,.28);font-size:17px;font-style:normal; }

.lobby-mini-status {
    padding:10px 12px;
    display:grid;
    grid-template-columns:1fr 1fr;
}

.lobby-mini-status div small,
.lobby-mini-status div strong { display:block; }

.lobby-mini-status div small {
    color:rgba(255,255,255,.3);
    font-size:7px;
    font-weight:900;
    letter-spacing:.12em;
}

.lobby-mini-status div strong {
    margin-top:3px;
    font-size:9px;
}

.lobby-mini-status div:last-child strong { color:#58d685; }

.lobby-footer {
    position:fixed;
    inset:auto 0 0 0;
    z-index:2500;
    height:38px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(7,10,14,.95);
    border-top:1px solid rgba(255,255,255,.09);
    color:rgba(255,255,255,.38);
    font-size:7px;
    font-weight:900;
    letter-spacing:.08em;
}

.lobby-footer > div {
    display:flex;
    gap:18px;
}

.lobby-footer b {
    margin-left:4px;
    padding:2px 5px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.65);
}

@media (max-width:1040px) {
    .lobby-topbar { grid-template-columns:auto 1fr auto; }
    .lobby-brand strong { display:none; }
    .lobby-tabs a { min-width:74px; padding:0 9px; }
    .lobby-main { grid-template-columns:245px minmax(350px,1fr); }
    .lobby-right { display:none; }
}

@media (max-width:720px) {
    body.lobby-body { overflow-y:auto; }
    .lobby-topbar { height:56px;grid-template-columns:auto 1fr auto;padding:0 9px; }
    .lobby-tabs { display:none; }
    .lobby-brand strong { display:inline;font-size:14px; }
    #lobby-account-button { display:none; }

    .lobby-main {
        min-height:100vh;
        padding:70px 12px 52px;
        display:block;
    }

    .lobby-scene { position:fixed;inset:56px 0 0; }
    .lobby-feature { display:grid;grid-template-columns:115px 1fr; }
    .lobby-feature-art { grid-row:1 / span 2;height:96px; }
    .lobby-feature > small { align-self:end; }
    .lobby-feature > strong { align-self:start; }

    .lobby-menu {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .lobby-menu-item { min-height:68px;border:1px solid rgba(255,255,255,.08); }

    .lobby-center { min-height:600px;margin-top:14px; }
    .lobby-title h1 { font-size:46px; }
    .lobby-creator-stage { width:94vw;height:400px;bottom:112px; }
    .lobby-monogram { font-size:125px; }

    .lobby-update {
        left:0;
        right:0;
        grid-template-columns:1fr auto;
        row-gap:8px;
    }

    .lobby-update > div:first-child { grid-column:1 / -1; }
    .lobby-update p { display:none; }

    .lobby-right { display:flex;margin-top:12px;padding-bottom:18px; }
    .lobby-footer { justify-content:center; }
    .lobby-footer > span { display:none; }
}

@media (max-width:440px) {
    .lobby-brand strong { display:none; }
    .lobby-menu { grid-template-columns:1fr; }
    .lobby-update { grid-template-columns:1fr; }
    .lobby-update > a { justify-content:center; }
}


/* =========================================================
   TWITCH LOBBY FEATURE CARD
   ========================================================= */

.twitch-feature-card {
    overflow: hidden;
}

.twitch-feature-art {
    position: relative;
    background: #0a0d12;
}

.twitch-preview {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.twitch-preview[hidden] {
    display: none;
}

.twitch-offline-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(
            125deg,
            rgba(190, 24, 43, .82),
            rgba(20, 28, 39, .3) 48%,
            rgba(27, 78, 132, .82)
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.05) 0 2px,
            transparent 2px 10px
        );
}

.twitch-offline-art[hidden] {
    display: none;
}

.twitch-offline-art > span {
    position: absolute;
    right: -8px;
    bottom: -27px;
    color: rgba(255,255,255,.12);
    font-size: 92px;
    font-weight: 1000;
    letter-spacing: -.08em;
}

.twitch-live-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    padding: 5px 8px;
    background: #d3192f;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 0 18px rgba(211,25,47,.35);
    color: white;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .12em;
}

.twitch-live-badge[hidden] {
    display: none;
}

.twitch-feature-copy {
    padding: 10px 13px 12px;
}

.twitch-feature-copy small,
.twitch-feature-copy strong,
.twitch-feature-copy span {
    display: block;
}

.twitch-feature-copy small {
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
}

.twitch-feature-copy strong {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: .04em;
}

.twitch-feature-copy span {
    margin-top: 4px;
    color: rgba(255,255,255,.36);
    font-size: 8px;
}

.twitch-feature-card.is-live {
    border-color: rgba(211,25,47,.65);
    box-shadow:
        0 14px 35px rgba(0,0,0,.3),
        0 0 22px rgba(211,25,47,.10);
}

.twitch-feature-card.is-live .twitch-feature-copy small {
    color: #ff5264;
}


/* ==========================================
   WARZONE-INSPIRED PLAYER / STAFF ROSTERS
   ========================================== */
.lobby-roster-panel {
    overflow: hidden;
}

.lobby-roster-list {
    max-height: 350px;
    overflow-y: auto;
}

.lobby-roster-row {
    min-height: 58px;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 40px 38px minmax(0, 1fr) 16px;
    gap: 9px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.065);
    background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 72%);
    color: #fff;
    text-decoration: none;
    position: relative;
}

.lobby-roster-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: transparent;
}

.lobby-player-row:hover,
.lobby-roster-row:hover {
    background: linear-gradient(90deg, rgba(178,25,42,.16), rgba(30,68,109,.08) 72%, transparent);
}

.lobby-player-row:hover::before {
    background: #c82336;
}

.lobby-roster-level {
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .03em;
    text-align: right;
}

.lobby-roster-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(135deg,#a91d2d,#214c7a);
    font-size: 13px;
    font-weight: 1000;
}

.lobby-roster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lobby-roster-copy {
    min-width: 0;
}

.lobby-roster-copy strong,
.lobby-roster-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-roster-copy strong {
    font-size: 10px;
    font-weight: 900;
}

.lobby-roster-copy small {
    margin-top: 3px;
    color: rgba(255,255,255,.35);
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: .08em;
}

.lobby-roster-dot,
.admin-roster-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    justify-self: center;
}

.lobby-roster-dot.online,
.admin-roster-dot.online {
    background: #4fd479;
    box-shadow: 0 0 8px rgba(79,212,121,.36);
}

.lobby-roster-dot.busy,
.admin-roster-dot.busy {
    background: #e0a13d;
    box-shadow: 0 0 8px rgba(224,161,61,.3);
}

.lobby-roster-dot.offline {
    background: rgba(255,255,255,.22);
}

.lobby-roster-empty {
    padding: 16px 12px;
    color: rgba(255,255,255,.38);
    font-size: 8px;
    line-height: 1.45;
}

#lobby-profile-state.online {
    color: #57d581;
}

/* Admin sidebar gets the same game-roster language */
.active-staff-panel {
    border-radius: 0;
    background: rgba(13,16,20,.96);
    border-color: #34383e;
}

.active-staff-panel summary {
    min-height: 42px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
}

.active-staff-list {
    padding: 0;
}

.active-staff-row.admin-roster-row {
    min-height: 54px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 38px 34px minmax(0,1fr) 16px;
    gap: 8px;
    align-items: center;
    border-radius: 0;
    border-top: 1px solid #252a30;
    background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 78%);
}

.active-staff-row.admin-roster-row + .active-staff-row.admin-roster-row {
    border-top: 1px solid #252a30;
}

.admin-roster-level {
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 1000;
    text-align: right;
}

.active-staff-avatar.admin-roster-avatar {
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(135deg,#a91d2d,#214c7a);
}

.active-staff-avatar.admin-roster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-roster-copy strong {
    font-size: 11px;
}

.admin-roster-copy .active-staff-role {
    margin-top: 3px;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

@media (max-width: 700px) {
    .lobby-roster-list {
        max-height: 260px;
    }
}


/* ==========================================
   ROSTER V17 — RANK EMBLEM + CLEANER HUD
   ========================================== */

/* The old 1000 level text is intentionally gone. */
.lobby-roster-level,
.admin-roster-level {
    display: none !important;
}

.lobby-roster-panel {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,13,19,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.lobby-roster-panel > header {
    min-height: 42px;
    padding: 9px 12px;
    background: rgba(255,255,255,.035);
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.lobby-roster-panel > header small {
    opacity: .42;
}

.lobby-roster-row {
    min-height: 62px;
    padding: 8px 11px;
    grid-template-columns: 44px minmax(0,1fr) 14px;
    gap: 10px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.lobby-roster-row:last-child {
    border-bottom: 0;
}

.lobby-roster-row:hover,
.lobby-player-row:hover {
    background: linear-gradient(90deg, rgba(181,27,45,.13), rgba(33,75,118,.055) 62%, transparent);
}

.lobby-roster-avatar {
    width: 40px;
    height: 40px;
    border-color: rgba(255,255,255,.18);
}

.lobby-roster-copy strong {
    font-size: 11px;
    letter-spacing: .01em;
}

.lobby-roster-copy small {
    margin-top: 4px;
    font-size: 7px;
    opacity: .72;
}

/* Admin active staff mirrors the same compact roster language. */
.active-staff-panel {
    background: rgba(8,13,19,.92);
    border: 1px solid rgba(255,255,255,.12);
}

.active-staff-row.admin-roster-row {
    min-height: 58px;
    padding: 7px 9px;
    grid-template-columns: 38px minmax(0,1fr) 14px;
    gap: 9px;
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.055);
}

.active-staff-avatar.admin-roster-avatar {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.18);
}

.admin-roster-copy strong {
    font-size: 10.5px;
}

.admin-roster-copy .active-staff-role {
    color: rgba(255,255,255,.42);
    font-size: 7.5px;
}

@media (max-width: 700px) {
    .lobby-roster-row {
        grid-template-columns: 40px minmax(0,1fr) 14px;
    }
}

/* =========================================
   V19 ACCOUNT MANAGER — TACTICAL ACCOUNT ROWS
========================================= */

#customer-account-list,
#employee-account-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.account-manager-row,
.account-manager-row-button {
    width: 100%;
    min-width: 0;
    min-height: 82px;
    margin: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    background: linear-gradient(90deg, rgba(22, 27, 33, .98), rgba(13, 17, 22, .98));
    border: 1px solid #303944;
    border-radius: 2px;
    color: #f5f7fa;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 3px 0 0 transparent;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
    appearance: none;
    -webkit-appearance: none;
}

.account-manager-row:hover,
.account-manager-row-button:hover {
    background: linear-gradient(90deg, rgba(31, 38, 46, 1), rgba(16, 21, 27, 1));
    border-color: #65717e;
    box-shadow: inset 3px 0 0 #e33a42;
    transform: translateY(-1px);
}

.account-manager-row:focus-visible,
.account-manager-row-button:focus-visible {
    outline: 2px solid #e33a42;
    outline-offset: 2px;
}

.account-list-avatar {
    width: 48px;
    height: 48px;
    display: block;
    flex: 0 0 48px;
    object-fit: cover;
    background: #11161c;
    border: 1px solid #4b5662;
    border-radius: 1px;
}

.account-list-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(210, 32, 48, .78), rgba(31, 76, 126, .72)),
        #151a20;
    color: white;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .04em;
}

.account-manager-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.account-manager-main strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.account-manager-main .account-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #aab3bd;
    font-size: 12px;
    line-height: 1.25;
}

.account-manager-main small {
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    color: #66e69a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.account-manager-main small:has(+ *) {
    color: #66e69a;
}

.account-view-pill {
    align-self: center;
    padding: 7px 9px;
    border-left: 1px solid #37414c;
    color: #d8dee5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.account-view-pill::after {
    content: "  ›";
    color: #e33a42;
    font-size: 15px;
    line-height: 0;
    vertical-align: -1px;
}

/* Keep account-manager search bars visually consistent with the HUD rows. */
#customer-account-search,
#employee-account-search {
    max-width: 620px;
    min-height: 46px;
    margin-top: 12px;
    background: #0e1216;
    border: 1px solid #303944;
    border-radius: 2px;
    color: #fff;
}

#customer-account-search:focus,
#employee-account-search:focus {
    border-color: #687684;
    outline: none;
    box-shadow: inset 3px 0 0 #e33a42;
}

/* Account Manager cards should fit the sharper lobby/admin visual language. */
.admin-view[data-view="accounts"] .admin-panel {
    border-radius: 3px;
    background: linear-gradient(180deg, #171717, #121416);
    border-color: #2d343b;
}

.admin-view[data-view="accounts"] .admin-panel > h2 {
    margin-bottom: 8px;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.admin-view[data-view="accounts"] .admin-description,
.admin-view[data-view="accounts"] .admin-panel > p {
    color: #9199a2;
    opacity: 1;
}

@media (max-width: 760px) {
    #customer-account-list,
    #employee-account-list {
        grid-template-columns: 1fr;
    }

    .account-manager-row,
    .account-manager-row-button {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 76px;
        padding: 11px;
    }

    .account-list-avatar {
        width: 44px;
        height: 44px;
    }

    .account-view-pill {
        grid-column: 2;
        justify-self: start;
        padding: 4px 0 0;
        border-left: 0;
        font-size: 8px;
    }
}

/* ==========================================
   CART PRODUCT IMAGE SIZE — V21
   Keep cart merch thumbnails compact even when
   broader product-image rules are added later.
   ========================================== */
#cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#cart-items .cart-item {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 18px;
    box-sizing: border-box;
}

#cart-items .cart-item > img.cart-item-image,
#cart-items img.cart-item-image,
.cart-page .cart-item-image {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #0d0d0d;
    border-radius: 12px;
}

#cart-items .cart-item-details {
    min-width: 0;
    flex: 1;
}

#cart-items .cart-item-details h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

#cart-items .cart-item-details p {
    margin: 6px 0;
}

#cart-items .cart-item-details button {
    margin-top: 10px;
}

@media (max-width: 600px) {
    #cart-items .cart-item {
        align-items: flex-start;
        gap: 14px;
        padding: 14px;
    }

    #cart-items .cart-item > img.cart-item-image,
    #cart-items img.cart-item-image,
    .cart-page .cart-item-image {
        flex-basis: 88px !important;
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
    }

    #cart-items .cart-item-details h3 {
        font-size: 18px;
    }
}

/* =========================================
   V22 ADMIN STAFF ONLINE — CLEAN SIDEBAR ROSTER
========================================= */
.admin-sidebar .active-staff-panel {
    width: 100%;
    margin: 10px 0 12px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 3px;
    background: #0b1015;
    overflow: hidden;
    box-sizing: border-box;
}

.admin-sidebar .active-staff-panel summary {
    min-height: 34px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #12171c;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    box-sizing: border-box;
}

.admin-sidebar .active-staff-panel summary::-webkit-details-marker {
    display: none;
}

.admin-sidebar .active-staff-panel summary::before {
    content: "▾";
    color: rgba(255,255,255,.65);
    font-size: 9px;
}

.admin-sidebar .active-staff-panel:not([open]) summary::before {
    content: "▸";
}

.admin-sidebar #active-staff-count {
    margin-left: auto;
    color: #58e68a;
    font-size: 9px;
}

.admin-sidebar .active-staff-list {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #090e13;
}

.admin-sidebar .active-staff-row.admin-roster-row {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 10px;
    gap: 9px;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.055);
    border-radius: 0;
    background: transparent;
}

.admin-sidebar .active-staff-row.admin-roster-row:first-child {
    border-top: 0;
}

.admin-sidebar .active-staff-row.admin-roster-row:hover {
    background: linear-gradient(90deg, rgba(210,31,50,.12), rgba(39,79,121,.06) 70%, transparent);
}

.admin-sidebar .active-staff-avatar.admin-roster-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 2px;
    background: linear-gradient(135deg, #a91d2d, #214c7a);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    box-sizing: border-box;
}

.admin-sidebar .active-staff-avatar.admin-roster-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.admin-sidebar .active-staff-text.admin-roster-copy {
    min-width: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    line-height: 1.15;
}

.admin-sidebar .admin-roster-copy strong {
    display: block;
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar .admin-roster-copy .active-staff-role {
    display: block;
    max-width: 100%;
    margin: 4px 0 0;
    color: rgba(255,255,255,.43);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar .admin-roster-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    margin: 0;
    border-radius: 50%;
    justify-self: end;
}

.admin-sidebar .active-staff-loading {
    padding: 12px 10px;
    color: rgba(255,255,255,.45);
    font-size: 8px;
    line-height: 1.4;
}


/* =========================================
   V23 ADMIN SIDEBAR — STAFF ROSTER CLEANUP
   Keep the nav scroll separate so the roster cannot be crushed.
========================================= */
.admin-sidebar {
    overflow: hidden !important;
}

.admin-sidebar .admin-nav {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.admin-sidebar .active-staff-panel {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 10px 0 8px !important;
}

.admin-sidebar .active-staff-panel[open] {
    height: auto !important;
}

.admin-sidebar .active-staff-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.admin-sidebar .active-staff-row.admin-roster-row {
    min-height: 54px !important;
    height: 54px !important;
    padding: 7px 10px !important;
    grid-template-columns: 36px minmax(0, 1fr) 9px !important;
    gap: 10px !important;
}

.admin-sidebar .active-staff-avatar.admin-roster-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}

.admin-sidebar .admin-roster-copy strong {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.admin-sidebar .admin-roster-copy .active-staff-role {
    margin-top: 4px !important;
    font-size: 7px !important;
    line-height: 1 !important;
}

/* The old signed-in-user card was visually duplicating the staff row.
   Keep Profile access, lose the giant second Panthy card. */
.admin-sidebar .admin-user-card {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.admin-sidebar .admin-user-card > strong,
.admin-sidebar .admin-user-card > small,
.admin-sidebar .admin-user-card .admin-user-name,
.admin-sidebar .admin-user-card .admin-user-role {
    display: none !important;
}

.admin-sidebar .admin-user-card #profile-button {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 2px !important;
    background: #12171c !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.admin-sidebar .admin-user-card #profile-button:hover {
    background: #19212a !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
}

/* ==========================================
   MERCH SHOWROOM // V16
   Tactical showroom language inspired by
   modern game loadout/operator selection UI.
   ========================================== */

body.merch-showroom-body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #071018;
    color: #fff;
}

.merch-showroom-body .lobby-topbar {
    z-index: 1100;
}

.merch-showroom {
    position: relative;
    min-height: calc(100vh - 66px);
    padding-top: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 62% 38%, rgba(24,67,88,.34), transparent 28%),
        linear-gradient(110deg, #0b1a23 0%, #081017 44%, #09141b 100%);
}

.merch-showroom-bg,
.merch-showroom-grid,
.merch-showroom-red,
.merch-showroom-blue {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.merch-showroom-grid {
    opacity: .14;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 80%);
}

.merch-showroom-red {
    background: radial-gradient(circle at 18% 70%, rgba(176,24,43,.15), transparent 28%);
}

.merch-showroom-blue {
    background: radial-gradient(circle at 82% 25%, rgba(38,90,125,.18), transparent 30%);
}

.merch-product-info {
    position: absolute;
    z-index: 4;
    top: 11%;
    left: 7.5%;
    width: min(310px, 25vw);
    text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.merch-emblem {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border: 1px solid rgba(255,255,255,.17);
    background:
        linear-gradient(135deg, rgba(191,27,46,.36), rgba(24,67,108,.34)),
        rgba(7,13,18,.58);
    font-size: 19px;
    font-weight: 1000;
    letter-spacing: .08em;
    clip-path: polygon(50% 0, 100% 24%, 88% 82%, 50% 100%, 12% 82%, 0 24%);
}

.merch-overline,
.merch-modal-kicker {
    color: #62b7dd;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.merch-product-info h1 {
    max-width: 360px;
    margin: 4px 0 11px;
    font-size: clamp(32px, 3vw, 51px);
    line-height: .95;
    font-weight: 1000;
    letter-spacing: -.025em;
}

.merch-product-info p {
    max-width: 290px;
    margin: 0 0 20px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    line-height: 1.55;
}

.merch-price-line {
    width: min(280px, 100%);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px;
    margin-bottom: 9px;
    border: 1px solid rgba(255,255,255,.15);
    border-left: 2px solid #c92a3f;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(8px);
}

.merch-price-line span,
.merch-showroom-actions label {
    color: #68bce0;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.merch-price-line strong {
    font-size: 17px;
}

.merch-showroom-actions {
    width: min(280px, 100%);
    display: grid;
    grid-template-columns: auto 58px 1fr;
    align-items: center;
    gap: 7px;
}

.merch-showroom-actions input {
    height: 38px;
    min-width: 0;
    margin: 0;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 0;
    background: rgba(8,13,18,.82);
    color: #fff;
    text-align: center;
    font-weight: 900;
}

.merch-showroom-actions button {
    height: 38px;
    margin: 0;
    padding: 0 13px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(90deg, #992033, #c7283d);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .06em;
}

.merch-showroom-actions button:disabled {
    opacity: .35;
    cursor: default;
}

.merch-selected-sizes {
    width: min(280px, 100%);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.merch-selected-sizes span {
    min-width: 32px;
    padding: 5px 8px;
    border-bottom: 2px solid rgba(75,157,198,.65);
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.72);
    font-size: 8px;
    font-weight: 900;
    text-align: center;
}

.merch-stage {
    position: absolute;
    z-index: 2;
    top: 6%;
    left: 26%;
    right: 14%;
    bottom: 23%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.merch-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: 48%;
    height: 12%;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(70,132,154,.18), transparent 70%);
}

.merch-stage-ring {
    position: absolute;
    width: min(40vw, 520px);
    aspect-ratio: 1;
    border: 1px solid rgba(72,153,187,.11);
    border-radius: 50%;
    box-shadow: inset 0 0 80px rgba(30,92,122,.08);
}

.merch-stage-ring::before,
.merch-stage-ring::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px dashed rgba(255,255,255,.055);
    border-radius: 50%;
}

.merch-stage-ring::after {
    inset: 26%;
    border-style: solid;
}

#merch-stage-image {
    position: relative;
    z-index: 3;
    max-width: min(48vw, 620px);
    max-height: min(62vh, 650px);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 28px rgba(0,0,0,.48));
    transform: translateY(-1%);
    animation: merchStageIn .24s ease;
}

@keyframes merchStageIn {
    from { opacity: .35; transform: translateY(1%) scale(.98); }
    to { opacity: 1; transform: translateY(-1%) scale(1); }
}

.merch-stage-placeholder {
    position: relative;
    z-index: 2;
    width: 290px;
    height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
    color: rgba(255,255,255,.12);
}

.merch-stage-placeholder strong {
    font-size: 72px;
    line-height: 1;
}

.merch-stage-placeholder span {
    max-width: 220px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-align: center;
}

.merch-side-hud {
    position: absolute;
    z-index: 4;
    top: 15%;
    right: 3.2%;
    width: 145px;
}

.merch-hud-block {
    padding: 9px 10px;
    border-top: 1px solid rgba(255,255,255,.13);
    background: linear-gradient(90deg, rgba(255,255,255,.045), transparent);
}

.merch-hud-block small,
.merch-hud-block strong {
    display: block;
}

.merch-hud-block small {
    color: rgba(255,255,255,.35);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.merch-hud-block strong {
    margin-top: 4px;
    font-size: 10px;
}

.merch-hud-link {
    min-height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(7,12,17,.62);
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 8px;
    font-weight: 900;
}

.merch-selector-area {
    position: absolute;
    z-index: 5;
    left: 7.5%;
    right: 5.8%;
    bottom: 41px;
}

.merch-selector-head {
    min-height: 31px;
    display: flex;
    align-items: end;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

#merch-item-counter {
    min-width: 50px;
    padding-bottom: 8px;
    color: rgba(255,255,255,.62);
    font-size: 9px;
    font-weight: 900;
}

.merch-category-tabs {
    min-width: 0;
    display: flex;
    align-items: end;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.merch-category-tabs::-webkit-scrollbar {
    display: none;
}

.merch-category-tab {
    width: auto;
    min-width: 54px;
    height: 29px;
    margin: 0;
    padding: 0 11px 7px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .06em;
    white-space: nowrap;
}

.merch-category-tab:hover {
    color: #fff;
}

.merch-category-tab.active {
    border-bottom-color: #63b9df;
    color: #fff;
    background: linear-gradient(to top, rgba(59,138,174,.12), transparent);
}

.merch-operator-grid {
    height: 190px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, 118px);
    grid-template-rows: repeat(2, 89px);
    gap: 6px;
    padding: 8px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(74,167,202,.65) rgba(255,255,255,.04);
}

.merch-operator-tile {
    position: relative;
    width: 100%;
    height: 89px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    background: #10161b;
    color: #fff;
    text-align: left;
}

.merch-operator-tile:hover {
    border-color: rgba(98,185,223,.65);
}

.merch-operator-tile.selected {
    border-color: #73c8ea;
    box-shadow: inset 0 0 0 1px rgba(115,200,234,.28);
}

.merch-operator-image-wrap {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(4,9,13,.95), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,.025), rgba(30,104,137,.09));
}

.merch-operator-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(.92);
    transition: transform .16s ease;
}

.merch-operator-tile:hover img,
.merch-operator-tile.selected img {
    transform: scale(1);
}

.merch-operator-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.18);
    font-size: 38px;
    font-weight: 1000;
}

.merch-operator-tile-info {
    position: absolute;
    z-index: 2;
    left: 5px;
    right: 5px;
    bottom: 4px;
    min-width: 0;
}

.merch-operator-tile-info b,
.merch-operator-tile-info strong,
.merch-operator-tile-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merch-operator-tile-info b {
    position: absolute;
    left: 0;
    bottom: 23px;
    color: #71c2e2;
    font-size: 7px;
}

.merch-operator-tile-info strong {
    font-size: 7.5px;
    font-weight: 1000;
    text-transform: uppercase;
}

.merch-operator-tile-info small {
    margin-top: 1px;
    color: rgba(255,255,255,.42);
    font-size: 6.5px;
}

.merch-selected-check {
    position: absolute;
    z-index: 3;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    display: none;
    place-items: center;
    background: #c6e72c;
    color: #081016;
    font-size: 9px;
    font-style: normal;
    font-weight: 1000;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 70% 100%, 0 100%);
}

.merch-operator-tile.selected .merch-selected-check {
    display: grid;
}

.merch-grid-empty {
    grid-row: 1 / -1;
    width: 320px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255,255,255,.14);
    color: rgba(255,255,255,.36);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.merch-footer {
    z-index: 20;
}

.merch-size-modal .modal-content {
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(8,13,18,.97);
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
}

.merch-size-modal .size-modal-row {
    border-bottom-color: rgba(255,255,255,.1);
}

@media (max-width: 980px) {
    body.merch-showroom-body {
        overflow: auto;
    }

    .merch-showroom {
        min-height: 950px;
    }

    .merch-product-info {
        top: 70px;
        left: 24px;
        width: 44%;
    }

    .merch-stage {
        top: 75px;
        left: 42%;
        right: 2%;
        bottom: 320px;
    }

    #merch-stage-image {
        max-width: 52vw;
        max-height: 450px;
    }

    .merch-side-hud {
        display: none;
    }

    .merch-selector-area {
        left: 24px;
        right: 24px;
        bottom: 58px;
    }

    .merch-operator-grid {
        height: 240px;
        grid-auto-columns: 125px;
        grid-template-rows: repeat(2, 112px);
    }

    .merch-operator-tile {
        height: 112px;
    }
}

@media (max-width: 650px) {
    .merch-showroom {
        min-height: 1080px;
    }

    .merch-product-info {
        top: 38px;
        left: 16px;
        right: 16px;
        width: auto;
    }

    .merch-emblem {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .merch-product-info h1 {
        max-width: 70%;
        font-size: 31px;
    }

    .merch-product-info p {
        max-width: 72%;
    }

    .merch-stage {
        top: 245px;
        left: 12%;
        right: 2%;
        bottom: 370px;
    }

    #merch-stage-image {
        max-width: 82vw;
        max-height: 400px;
    }

    .merch-stage-ring {
        width: 78vw;
    }

    .merch-price-line,
    .merch-showroom-actions,
    .merch-selected-sizes {
        width: 70%;
    }

    .merch-selector-area {
        left: 12px;
        right: 12px;
        bottom: 54px;
    }

    .merch-selector-head {
        align-items: center;
    }

    .merch-category-tab {
        min-width: 48px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 8px;
    }

    .merch-operator-grid {
        height: 250px;
        grid-auto-columns: 114px;
        grid-template-rows: repeat(2, 116px);
    }

    .merch-operator-tile {
        height: 116px;
    }
}

/* SUPPORT COMMAND V25 */
.sc-body{margin:0;min-height:100vh;background:#05090e;color:#fff;font-family:Arial,sans-serif}.sc-header{height:64px;display:grid;grid-template-columns:280px 1fr 100px;align-items:center;padding:0 26px;box-sizing:border-box;background:#060a0f;border-bottom:1px solid #26303a}.sc-header a{color:#fff;text-decoration:none}.sc-brand{font-weight:900}.sc-brand b{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:10px;font-size:9px;background:linear-gradient(135deg,#d51d32,#244d83);border:1px solid #6c7680}.sc-header nav{height:100%;display:flex;justify-content:center}.sc-header nav a{min-width:100px;display:grid;place-items:center;color:#77808a;font-size:9px;font-weight:900;letter-spacing:.12em}.sc-header nav a.on{color:#fff;background:#10151b;border-bottom:2px solid #d9364c}.sc-hub{min-height:calc(100vh - 64px);display:grid;grid-template-rows:42px 1fr auto;background:radial-gradient(circle at 50% 60%,#0b2435 0,transparent 30%),linear-gradient(135deg,#07101a,#04070b 60%,#13090d)}.sc-online{padding:16px 30px;font-size:8px;font-weight:900;letter-spacing:.16em;color:#6f7780}.sc-online i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#43ef8a;box-shadow:0 0 12px #43ef8a;margin-right:8px}.sc-online b{color:#43ef8a}.sc-stage{position:relative;min-height:470px;overflow:hidden}.sc-grid{position:absolute;inset:0;background-image:linear-gradient(#2f79a311 1px,transparent 1px),linear-gradient(90deg,#2f79a311 1px,transparent 1px);background-size:48px 48px}.sc-copy{position:absolute;left:6%;top:22%;max-width:350px}.sc-copy small,.sc-range-copy>small,.sc-faq>aside>small,.sc-faq-panels article>small{color:#56b5eb;font-size:8px;font-weight:900;letter-spacing:.2em}.sc-copy h1,.sc-range-copy h1{font-size:44px;margin:8px 0}.sc-copy p,.sc-range-copy p{color:#8a939d;line-height:1.6}.sc-display{position:absolute;left:55%;top:48%;transform:translate(-50%,-50%) rotate(-4deg);width:330px;height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#151d25aa,#0a1118cc);border:1px solid #3a4a58;box-shadow:0 25px 80px #000}.sc-display:before,.sc-display:after{content:"";position:absolute;width:390px;height:100px;border:1px solid #3b90bd55;border-radius:50%;transform:rotate(12deg)}.sc-display:after{transform:rotate(-16deg);border-color:#cf304355}.sc-display span{font-size:72px;font-weight:1000;color:#ffffff18}.sc-display small{position:absolute;bottom:15px;color:#4d9bc8;font-size:7px;letter-spacing:.2em}.sc-modes{width:min(760px,90vw);margin:0 auto 28px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.sc-modes a{position:relative;padding:15px 20px 15px 60px;background:#0b1219;border:1px solid #33404b;color:#fff;text-decoration:none}.sc-modes a:hover{background:#102333;border-color:#4aa4d6}.sc-modes em{position:absolute;left:18px;top:25px;color:#65717c;font-size:9px;font-style:normal}.sc-modes b,.sc-modes small{display:block}.sc-modes b{font-size:16px}.sc-modes small{margin-top:4px;color:#65717c;font-size:8px}.sc-faq{height:calc(100vh - 94px);display:grid;grid-template-columns:280px minmax(400px,580px) 1fr;gap:28px;padding:35px 4vw 50px;box-sizing:border-box;background:linear-gradient(110deg,#060b11,#080c13 55%,#07121a)}.sc-faq h1{margin:5px 0 22px}.sc-faq aside button{width:100%;padding:13px 14px;margin-bottom:8px;text-align:left;background:#11171e;border:1px solid #313b44;color:#fff;cursor:pointer}.sc-faq aside button span{display:block;margin-top:4px;color:#68737d;font-size:8px}.sc-faq aside button.active{background:linear-gradient(90deg,#176b9c88,#101922);border-color:#4aa8dc;box-shadow:inset 0 2px #65c9f7}.sc-create{display:block;padding:14px;color:#fff;text-decoration:none;background:#0b1016;border:1px solid #313b44;font-size:10px}.sc-faq-panels{padding-top:45px}.sc-faq-panels article{display:none}.sc-faq-panels article.active{display:block}.sc-faq-panels h2{margin:5px 0 18px}.sc-faq-panels details{margin-bottom:8px;background:#0e141a;border:1px solid #303941}.sc-faq-panels summary{padding:16px;cursor:pointer;font-size:11px;font-weight:900}.sc-faq-panels p{padding:0 16px 16px;margin:0;color:#8b949d;font-size:12px;line-height:1.6}.sc-faq-display{position:relative;border-left:1px solid #202a32}.sc-faq-display>div{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:100px;font-weight:1000;color:#ffffff0d}.sc-faq-display small{display:block;font-size:8px;color:#4f9fc755;letter-spacing:.2em}.sc-range{min-height:calc(100vh - 94px);padding:7vh 8vw 70px;box-sizing:border-box;display:grid;grid-template-columns:minmax(260px,400px) minmax(450px,700px);gap:8vw;align-items:center;background:linear-gradient(115deg,#061019,#080a0e 55%,#13080c)}.sc-console{background:#090f14;border:1px solid #35414b}.sc-console>header{height:46px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303942;font-size:8px;font-weight:900}.sc-console>header b{color:#43e88a}.sc-console form{padding:22px}.sc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sc-console label{display:block;margin-bottom:14px;color:#89929b;font-size:8px;font-weight:900;letter-spacing:.1em}.sc-console label small{float:right}.sc-console input,.sc-console select,.sc-console textarea{width:100%;box-sizing:border-box;margin-top:7px;padding:12px;background:#070b0f;border:1px solid #35414b;border-radius:0;color:#fff}.sc-console textarea{min-height:135px;resize:vertical}.sc-console button{width:100%;padding:14px 18px;text-align:left;background:#bd1d31;border:1px solid #ef5362;color:#fff;font-weight:900;cursor:pointer}.sc-console button small{display:block;margin-top:3px;opacity:.55;font-size:7px}.sc-console button:disabled{opacity:.5}.sc-console form>p{min-height:18px;font-size:9px;font-weight:900}.sc-console form>p.ok{color:#43e88a}.sc-console form>p.bad{color:#ff5366}.sc-foot{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-sizing:border-box;background:#05090e;border-top:1px solid #202a32;font-size:7px}.sc-foot a,.sc-foot span{color:#68727c;text-decoration:none}@media(max-width:900px){.sc-header{grid-template-columns:1fr auto;padding:0 14px}.sc-header nav{display:none}.sc-modes{grid-template-columns:1fr}.sc-faq{height:auto;min-height:calc(100vh - 94px);grid-template-columns:1fr;padding:24px 16px 60px}.sc-faq-panels{padding-top:0}.sc-faq-display{display:none}.sc-range{grid-template-columns:1fr;padding:35px 16px 60px;gap:24px}}@media(max-width:560px){.sc-copy{top:8%;left:7%}.sc-copy h1,.sc-range-copy h1{font-size:34px}.sc-display{top:60%;transform:translate(-50%,-50%) scale(.7)}.sc-two{grid-template-columns:1fr}}


/* ==========================================
   SUPPORT HUB V26
========================================== */
.sc-hub-v26{
    min-height:calc(100vh - 64px);
    display:grid;
    grid-template-rows:1fr auto 28px;
    background:
        radial-gradient(circle at 52% 55%,rgba(19,90,140,.18),transparent 34%),
        linear-gradient(145deg,#07101a 0%,#04070b 58%,#12080c 100%);
}
.sc-stage-v26{min-height:0;height:100%;position:relative}
.sc-stage-v26 .sc-grid{opacity:.7}
.sc-corner-label{position:absolute;left:3.5%;top:4%;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.sc-corner-label span{font-size:8px;font-weight:900;letter-spacing:.22em;color:#5bb9ed}
.sc-corner-label strong{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.68)}
.sc-display-v26{left:50%;top:49%;width:430px;height:245px;transform:translate(-50%,-50%) rotate(-3deg);background:linear-gradient(135deg,rgba(15,24,33,.84),rgba(7,12,18,.92));border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 65px rgba(33,121,177,.12)}
.sc-display-v26 span{font-size:92px;color:rgba(255,255,255,.06)}
.sc-display-v26 small{bottom:18px;font-size:8px;letter-spacing:.24em;color:rgba(90,183,235,.44)}
.sc-display-v26:before{width:520px;height:130px}
.sc-display-v26:after{width:470px;height:115px}
.sc-system-state{position:absolute;right:3.5%;top:4%;display:flex;align-items:center;gap:7px;font-size:7px;font-weight:900;letter-spacing:.15em;color:rgba(255,255,255,.35)}
.sc-system-state i{width:6px;height:6px;border-radius:50%;background:#43ef8a;box-shadow:0 0 10px #43ef8a}
.sc-system-state b{color:#43ef8a}
.sc-modes-v26{margin:0 auto 14px;width:min(680px,86vw);gap:8px}
.sc-modes-v26 a{min-height:62px;padding-top:12px;padding-bottom:12px;background:rgba(8,15,22,.9)}
.sc-modes-v26 a:first-child{border-color:#3c96c5;box-shadow:inset 0 2px rgba(88,190,239,.85)}
.sc-hud-footer{height:28px;padding:0 28px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.22);font-size:7px;font-weight:900;letter-spacing:.13em}
@media(max-width:900px){
    .sc-display-v26{width:330px;height:195px}
    .sc-corner-label{left:18px;top:18px}
    .sc-system-state{right:18px;top:18px}
    .sc-modes-v26{width:calc(100% - 28px)}
}
@media(max-width:560px){
    .sc-display-v26{width:280px;height:165px;top:52%}
    .sc-display-v26 span{font-size:64px}
    .sc-system-state span{display:none}
}


/* ==========================================
   SUPPORT DETAIL BACK BUTTON // V27
   Sits directly beneath the RCV branding.
========================================== */
.sc-detail-header{
    height:86px !important;
    align-items:start !important;
    padding-top:13px !important;
}

.sc-brand-stack{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    align-self:start;
    min-width:220px;
}

.sc-brand-stack .sc-brand{
    display:flex;
    align-items:center;
    min-height:36px;
}

.sc-back-under-brand{
    display:inline-flex !important;
    align-items:center;
    width:max-content;
    margin-top:5px;
    padding:3px 8px 3px 0;
    color:rgba(255,255,255,.48) !important;
    font-size:8px !important;
    font-weight:900;
    letter-spacing:.14em;
    text-decoration:none;
    line-height:1;
    transition:color .14s ease, transform .14s ease;
}

.sc-back-under-brand:hover{
    color:#fff !important;
    transform:translateX(-2px);
}

.sc-detail-header nav{
    height:51px !important;
}

.sc-detail-header > a:last-child{
    margin-top:4px;
}

.sc-detail-header + .sc-faq{
    height:calc(100vh - 116px);
}

.sc-detail-header + .sc-range{
    min-height:calc(100vh - 116px);
}

@media(max-width:900px){
    .sc-detail-header{
        height:86px !important;
    }

    .sc-brand-stack{
        min-width:0;
    }

    .sc-back-under-brand{
        margin-top:4px;
    }
}


/* ==========================================
   ACCOUNT LOBBY // V28
========================================== */

.account-lobby-body{
    margin:0;
    min-height:100vh;
    overflow:hidden;
    background:#030609;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}

.account-lobby-header{
    height:64px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:280px 1fr 100px;
    align-items:center;
    padding:0 26px;
    background:rgba(4,8,12,.97);
    border-bottom:1px solid rgba(255,255,255,.12);
    position:relative;
    z-index:20;
}

.account-lobby-brand{
    display:flex;
    align-items:center;
    gap:11px;
    color:#fff;
    text-decoration:none;
    font-size:17px;
}

.account-lobby-brand span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#d5233a,#244f86);
    border:1px solid rgba(255,255,255,.32);
    font-size:8px;
    font-weight:1000;
}

.account-lobby-nav{
    height:100%;
    display:flex;
    justify-content:center;
}

.account-lobby-nav a{
    min-width:105px;
    padding:0 17px;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.42);
    text-decoration:none;
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.account-lobby-nav a.active{
    color:#fff;
    background:rgba(255,255,255,.045);
    border-bottom:2px solid #d83449;
}

.account-lobby-cart{
    justify-self:end;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    text-decoration:none;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.account-lobby-shell{
    height:calc(100vh - 64px);
    display:grid;
    grid-template-columns:310px minmax(420px,1fr) 390px;
    overflow:hidden;
    background:
        radial-gradient(circle at 52% 62%,rgba(23,93,139,.13),transparent 28%),
        linear-gradient(110deg,#05090e 0%,#030609 58%,#07090d 100%);
}

.account-lobby-left,
.account-lobby-right{
    position:relative;
    z-index:5;
    padding:28px 20px 42px;
    box-sizing:border-box;
    overflow-y:auto;
}

.account-lobby-left{
    background:linear-gradient(90deg,rgba(4,8,12,.94),rgba(4,8,12,.65));
    border-right:1px solid rgba(255,255,255,.05);
}

.account-lobby-right{
    background:linear-gradient(270deg,rgba(4,8,12,.96),rgba(4,8,12,.76));
    border-left:1px solid rgba(255,255,255,.06);
}

.account-panel-heading{
    min-height:42px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    margin-bottom:10px;
    padding:0 5px 8px;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.account-panel-heading span{
    grid-column:1 / -1;
    margin-bottom:3px;
    color:#5aaee1;
    font-size:7px;
    font-weight:900;
    letter-spacing:.18em;
}

.account-panel-heading strong{
    font-size:12px;
    letter-spacing:.04em;
}

.account-panel-heading b{
    color:#50e78b;
    font-size:10px;
}

.account-staff-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.account-staff-row{
    min-height:54px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 9px;
    gap:10px;
    align-items:center;
    padding:7px 10px;
    box-sizing:border-box;
    background:rgba(13,20,27,.92);
    border:1px solid rgba(255,255,255,.13);
}

.account-staff-avatar{
    width:36px;
    height:36px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#aa1732,#264f82);
    border:1px solid rgba(255,255,255,.25);
}

.account-staff-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.account-staff-initial{
    font-size:14px;
    font-weight:1000;
}

.account-staff-copy{
    min-width:0;
}

.account-staff-copy strong,
.account-staff-copy small{
    display:block;
}

.account-staff-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
}

.account-staff-copy small{
    margin-top:4px;
    color:rgba(255,255,255,.34);
    font-size:7px;
    font-weight:900;
    letter-spacing:.08em;
}

.account-staff-row>i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#43e98a;
    box-shadow:0 0 10px #43e98a;
}

.account-staff-row>i.busy{
    background:#f2ad37;
    box-shadow:0 0 10px rgba(242,173,55,.65);
}

.account-staff-loading{
    padding:18px 12px;
    color:rgba(255,255,255,.3);
    border:1px solid rgba(255,255,255,.08);
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.account-admin-entry{
    position:relative;
    margin-top:12px;
    padding:13px 36px 13px 13px;
    display:block;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(90deg,rgba(164,20,40,.33),rgba(9,15,21,.94));
    border:1px solid rgba(221,55,74,.45);
}

.account-admin-entry span,
.account-admin-entry strong{
    display:block;
}

.account-admin-entry span{
    color:#dd5363;
    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
}

.account-admin-entry strong{
    margin-top:4px;
    font-size:10px;
}

.account-admin-entry>b{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
}

.account-showcase{
    position:relative;
    min-width:0;
    overflow:hidden;
}

.account-showcase-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(56,128,173,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(56,128,173,.055) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%);
}

.account-showcase-video{
    position:absolute;
    left:50%;
    bottom:0;
    width:100%;
    height:100%;
    transform:translateX(-50%);
    object-fit:contain;
    object-position:center bottom;
    opacity:0;
    z-index:2;
}

.account-showcase-video.ready{
    opacity:1;
}

.account-video-fallback{
    position:absolute;
    left:50%;
    top:49%;
    transform:translate(-50%,-50%);
    width:min(430px,75%);
    height:420px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(180deg,rgba(16,24,32,.22),rgba(6,10,15,.06));
    border-left:1px solid rgba(74,157,209,.16);
    border-right:1px solid rgba(211,42,61,.12);
}

.account-video-fallback span{
    font-size:120px;
    font-weight:1000;
    color:rgba(255,255,255,.035);
    letter-spacing:-.1em;
}

.account-video-fallback strong{
    margin-top:-20px;
    font-size:13px;
    letter-spacing:.14em;
}

.account-video-fallback small{
    margin-top:8px;
    color:rgba(255,255,255,.28);
    font-size:7px;
    letter-spacing:.12em;
}

.account-showcase-floor{
    position:absolute;
    left:50%;
    bottom:-55px;
    width:75%;
    height:170px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(31,112,164,.13);
    border:1px solid rgba(64,144,195,.17);
    filter:blur(2px);
}

.account-showcase-label{
    position:absolute;
    left:32px;
    bottom:32px;
    z-index:4;
    padding-left:12px;
    border-left:2px solid #4aa8db;
}

.account-showcase-label span,
.account-showcase-label strong{
    display:block;
}

.account-showcase-label span{
    color:rgba(255,255,255,.33);
    font-size:7px;
    font-weight:900;
    letter-spacing:.16em;
}

.account-showcase-label strong{
    margin-top:4px;
    font-size:16px;
}

.account-profile-card,
.account-edit-panel{
    margin-bottom:12px;
    background:rgba(12,18,24,.92);
    border:1px solid rgba(255,255,255,.14);
}

.account-profile-card{
    position:relative;
    padding:18px;
}

.account-profile-tag{
    position:absolute;
    top:-1px;
    left:18px;
    padding:4px 8px;
    background:#d6b21f;
    color:#0a0a0a;
    font-size:8px;
    font-weight:1000;
}

.account-profile-identity{
    margin-top:14px;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:12px;
    align-items:center;
}

.account-profile-avatar-wrap{
    width:58px;
    height:58px;
}

.account-profile-avatar{
    width:58px;
    height:58px;
    box-sizing:border-box;
    object-fit:cover;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#b21836,#245789);
    border:1px solid rgba(255,255,255,.28);
}

.account-profile-initial{
    font-size:22px;
    font-weight:1000;
}

.account-profile-name-block{
    min-width:0;
}

.account-profile-name-block span{
    color:#d34b5e;
    font-size:7px;
    font-weight:900;
    letter-spacing:.12em;
}

.account-profile-name-block h1{
    margin:3px 0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:24px;
    white-space:nowrap;
}

.account-profile-name-block small{
    color:rgba(255,255,255,.38);
    font-size:8px;
}

.account-profile-status-row{
    margin-top:16px;
    padding:10px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);
}

.account-profile-status-row span{
    color:#45e88b;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.account-profile-status-row span i{
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:6px;
    border-radius:50%;
    background:#45e88b;
    box-shadow:0 0 8px #45e88b;
}

.account-profile-status-row strong{
    color:rgba(255,255,255,.58);
    font-size:8px;
}

.account-profile-details{
    margin-top:12px;
    display:grid;
    gap:6px;
}

.account-profile-details>div{
    padding:9px 10px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.07);
}

.account-profile-details span,
.account-profile-details strong{
    display:block;
}

.account-profile-details span{
    color:rgba(255,255,255,.3);
    font-size:7px;
    font-weight:900;
    letter-spacing:.11em;
}

.account-profile-details strong{
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    color:rgba(255,255,255,.83);
    font-size:9px;
}

.account-edit-panel{
    padding:16px;
}

.account-edit-heading{
    margin-bottom:14px;
}

.account-edit-heading span,
.account-edit-heading strong{
    display:block;
}

.account-edit-heading span{
    color:#5baee0;
    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
}

.account-edit-heading strong{
    margin-top:3px;
    font-size:13px;
}

.account-photo-control label{
    min-height:36px;
    margin-bottom:10px;
    display:grid;
    place-items:center;
    background:#121920;
    border:1px solid rgba(255,255,255,.13);
    color:rgba(255,255,255,.72);
    cursor:pointer;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

#account-profile-form label{
    display:block;
    margin:0 0 10px;
    color:rgba(255,255,255,.42);
    font-size:7px;
    font-weight:900;
    letter-spacing:.11em;
}

#account-profile-form input{
    width:100%;
    box-sizing:border-box;
    margin-top:5px;
    padding:10px 11px;
    background:#080c10;
    border:1px solid rgba(255,255,255,.15);
    border-radius:0;
    color:#fff;
}

#account-profile-form input:focus{
    outline:none;
    border-color:#4aa8db;
    box-shadow:inset 2px 0 #4aa8db;
}

#account-profile-form button,
.account-lobby-secondary,
.account-lobby-danger{
    width:100%;
    min-height:39px;
    margin-top:5px;
    border-radius:0;
    cursor:pointer;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

#account-profile-form button{
    background:linear-gradient(90deg,#a9182e,#d52c42);
    border:1px solid #e74a5c;
    color:#fff;
}

.account-lobby-secondary{
    background:#121920;
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
}

.account-lobby-danger{
    background:rgba(125,12,27,.16);
    border:1px solid rgba(218,51,69,.34);
    color:#eb6674;
}

.account-profile-note{
    margin:10px 0 0;
    color:rgba(255,255,255,.3);
    font-size:7px;
    line-height:1.5;
}

@media(max-width:1050px){
    .account-lobby-shell{
        grid-template-columns:260px minmax(320px,1fr) 330px;
    }
}

@media(max-width:850px){
    .account-lobby-body{
        overflow:auto;
    }

    .account-lobby-header{
        grid-template-columns:1fr auto;
        padding:0 14px;
    }

    .account-lobby-nav{
        display:none;
    }

    .account-lobby-shell{
        height:auto;
        min-height:calc(100vh - 64px);
        grid-template-columns:1fr;
        overflow:visible;
    }

    .account-showcase{
        min-height:460px;
        grid-row:1;
    }

    .account-lobby-right{
        grid-row:2;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.07);
    }

    .account-lobby-left{
        grid-row:3;
        border-right:0;
        border-top:1px solid rgba(255,255,255,.07);
    }

    .account-showcase-video{
        height:460px;
    }

    .account-video-fallback{
        height:330px;
    }
}

@media(max-width:480px){
    .account-lobby-brand strong{
        font-size:14px;
    }

    .account-lobby-left,
    .account-lobby-right{
        padding:20px 14px 34px;
    }

    .account-showcase{
        min-height:390px;
    }

    .account-showcase-video{
        height:390px;
    }
}


/* ==========================================
   ADMIN HOMEPAGE MATCH // V30
   Reuses the ACTUAL homepage lobby classes.
========================================== */

body.admin-lobby-dashboard-active{
    overflow:hidden;
    background:#020609;
}

body.admin-lobby-dashboard-active #admin-shell.admin-shell{
    display:block !important;
    min-height:100vh;
}

body.admin-lobby-dashboard-active #admin-sidebar,
body.admin-lobby-dashboard-active #admin-sidebar-backdrop,
body.admin-lobby-dashboard-active .admin-mobile-bar{
    display:none !important;
}

body.admin-lobby-dashboard-active .admin-main{
    min-height:100vh;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

body.admin-lobby-dashboard-active .admin-view[data-view="dashboard"]{
    min-height:100vh;
    margin:0 !important;
    padding:0 !important;
}

.admin-homepage-shell{
    height:100vh;
    display:grid;
    grid-template-rows:64px minmax(0,1fr) 34px;
    overflow:hidden;
}

.admin-homepage-shell .lobby-topbar,
.admin-homepage-shell .lobby-footer{
    position:relative;
    inset:auto;
}

.admin-homepage-shell .lobby-main{
    min-height:0;
    height:100%;
}

.admin-home-topbar .lobby-tabs button{
    min-width:108px;
    height:100%;
    padding:0 16px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.45);
    font:inherit;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
    cursor:pointer;
}

.admin-home-topbar .lobby-tabs button.active{
    color:#fff;
    border-bottom:2px solid #e12c43;
    background:rgba(255,255,255,.04);
}

.admin-home-logout{
    border:0;
    font:inherit;
    cursor:pointer;
}

.admin-home-feature{
    cursor:default;
}

.admin-home-feature-art{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.admin-home-feature-art>span{
    font-size:58px;
    font-weight:1000;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.12);
}

.admin-homepage-shell .lobby-menu-item{
    width:100%;
    border:0;
    text-align:left;
    font:inherit;
    color:inherit;
    cursor:pointer;
}

.admin-homepage-shell .lobby-menu-item[hidden],
.admin-homepage-shell [data-admin-only][hidden],
.admin-homepage-shell [data-support-access][hidden],
.admin-homepage-shell [data-store-access][hidden],
.admin-homepage-shell [data-account-access][hidden]{
    display:none !important;
}

.admin-home-stage{
    overflow:visible;
}

.admin-home-stage-stats{
    position:absolute;
    left:50%;
    bottom:6%;
    transform:translateX(-50%);
    width:min(620px,92%);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    z-index:3;
}

.admin-home-stage-stats button{
    min-height:72px;
    padding:10px 11px;
    text-align:left;
    color:#fff;
    background:rgba(7,12,17,.88);
    border:1px solid rgba(255,255,255,.13);
    cursor:pointer;
}

.admin-home-stage-stats button:hover{
    background:rgba(17,34,45,.94);
    border-color:#54a8d6;
}

.admin-home-stage-stats small,
.admin-home-stage-stats strong{
    display:block;
}

.admin-home-stage-stats small{
    color:rgba(255,255,255,.38);
    font-size:7px;
    font-weight:900;
    letter-spacing:.1em;
}

.admin-home-stage-stats strong{
    margin-top:6px;
    font-size:23px;
}

.admin-home-update{
    grid-template-columns:180px 1fr auto;
}

.admin-home-update-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    align-items:center;
}

.admin-home-update-stats span{
    color:rgba(255,255,255,.42);
    font-size:7px;
    font-weight:900;
    letter-spacing:.08em;
}

.admin-home-update-stats b{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:16px;
}

.admin-home-update>button{
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.13);
    background:#10171e;
    color:#fff;
    font-size:7px;
    font-weight:900;
    cursor:pointer;
}

.admin-home-operations{
    overflow:hidden;
}

.admin-home-operations>header{
    min-height:46px;
}

.admin-home-operations>button{
    width:100%;
    min-height:48px;
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    background:transparent;
    border:0;
    border-top:1px solid rgba(255,255,255,.07);
    color:#fff;
    cursor:pointer;
}

.admin-home-operations>button:hover{
    background:rgba(255,255,255,.025);
}

.admin-home-operations>button span small,
.admin-home-operations>button span strong{
    display:block;
}

.admin-home-operations>button span small{
    color:#54aee0;
    font-size:6px;
    font-weight:900;
    letter-spacing:.12em;
}

.admin-home-operations>button span strong{
    margin-top:3px;
    font-size:8px;
}

.admin-home-operations>button>b{
    font-size:16px;
}

#admin-home-avatar img,
#dashboard-staff-list .lobby-roster-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-home-footer{
    height:34px;
}

@media(max-width:1000px){
    body.admin-lobby-dashboard-active{
        overflow:auto;
    }

    .admin-homepage-shell{
        height:auto;
        min-height:100vh;
        grid-template-rows:64px auto 34px;
    }

    .admin-homepage-shell .lobby-main{
        height:auto;
    }

    .admin-home-stage-stats{
        grid-template-columns:1fr 1fr;
    }

    .admin-home-update{
        grid-template-columns:1fr;
        gap:10px;
    }

    .admin-home-update-stats{
        grid-template-columns:1fr 1fr;
    }
}


/* ==========================================
   ADMIN DASHBOARD SHELL RESET // V31
   Prevents the legacy sidebar/admin-shell layout
   from constraining the homepage-style dashboard.
========================================== */

body.admin-lobby-dashboard-active #admin-shell{
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100vh !important;
    min-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    overflow:hidden !important;
}

body.admin-lobby-dashboard-active #admin-sidebar,
body.admin-lobby-dashboard-active .admin-sidebar,
body.admin-lobby-dashboard-active #admin-sidebar-backdrop,
body.admin-lobby-dashboard-active .admin-sidebar-backdrop,
body.admin-lobby-dashboard-active .admin-mobile-bar{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

body.admin-lobby-dashboard-active .admin-main{
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100vh !important;
    min-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

body.admin-lobby-dashboard-active .admin-main > .admin-view[data-view="dashboard"]{
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100vh !important;
    min-height:100vh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

body.admin-lobby-dashboard-active .admin-homepage-shell{
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100vh !important;
    margin:0 !important;
    padding:0 !important;
}

body.admin-lobby-dashboard-active .admin-homepage-shell .lobby-main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
}

body.admin-lobby-dashboard-active .admin-homepage-shell .lobby-left,
body.admin-lobby-dashboard-active .admin-homepage-shell .lobby-center,
body.admin-lobby-dashboard-active .admin-homepage-shell .lobby-right{
    min-width:0 !important;
    max-width:none !important;
}

/* Restore the legacy sidebar layout immediately after leaving Dashboard. */
body:not(.admin-lobby-dashboard-active) #admin-shell.admin-shell{
    width:auto;
    height:auto;
}



/* ==========================================
   ADMIN MOBILE SCROLL FIX // V32
   V31 correctly locked desktop to the viewport,
   but those !important rules also locked mobile.
========================================== */

@media (max-width: 720px){

    html,
    body,
    body.admin-lobby-dashboard-active{
        width:100%;
        height:auto !important;
        min-height:100%;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    body.admin-lobby-dashboard-active #admin-shell{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:100vh !important;
        overflow:visible !important;
    }

    body.admin-lobby-dashboard-active .admin-main{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:100vh !important;
        overflow:visible !important;
    }

    body.admin-lobby-dashboard-active .admin-main > .admin-view[data-view="dashboard"]{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:100vh !important;
        overflow:visible !important;
    }

    body.admin-lobby-dashboard-active .admin-homepage-shell{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:100vh !important;
        overflow:visible !important;
        padding-bottom:46px !important;
    }

    .admin-homepage-shell .lobby-topbar{
        position:sticky;
        top:0;
        z-index:2600;
        width:100%;
    }

    body.admin-lobby-dashboard-active .admin-homepage-shell .lobby-main{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        padding:18px 12px 30px !important;
        overflow:visible !important;
    }

    .admin-homepage-shell .lobby-scene{
        position:fixed !important;
        inset:56px 0 0 !important;
    }

    .admin-homepage-shell .lobby-left,
    .admin-homepage-shell .lobby-center,
    .admin-homepage-shell .lobby-right{
        display:block !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        position:relative;
    }

    .admin-homepage-shell .lobby-left{
        margin-bottom:16px;
    }

    .admin-homepage-shell .lobby-menu{
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .admin-homepage-shell .lobby-center{
        min-height:680px !important;
        margin-top:0 !important;
    }

    .admin-homepage-shell .lobby-title{
        top:34px;
        width:94%;
    }

    .admin-homepage-shell .lobby-title h1{
        font-size:clamp(38px,12vw,52px);
    }

    .admin-homepage-shell .lobby-creator-stage{
        width:100%;
        height:430px;
        bottom:145px;
    }

    .admin-home-stage-stats{
        width:94%;
        bottom:5%;
        grid-template-columns:1fr 1fr;
    }

    .admin-homepage-shell .lobby-update{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        grid-template-columns:1fr;
        gap:9px;
        min-height:120px;
    }

    .admin-home-update-stats{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .admin-homepage-shell .lobby-right{
        display:flex !important;
        flex-direction:column;
        gap:10px;
        margin-top:18px;
        padding-bottom:20px;
    }

    .admin-homepage-shell .lobby-footer{
        position:relative !important;
        width:100%;
        margin-top:0;
    }

    .admin-home-topbar .lobby-top-actions{
        gap:5px;
    }

    .admin-home-topbar .lobby-top-action{
        padding:7px 8px;
        font-size:7px;
    }
}

@media (max-width: 440px){

    .admin-homepage-shell .lobby-menu{
        grid-template-columns:1fr;
    }

    .admin-homepage-shell .lobby-center{
        min-height:760px !important;
    }

    .admin-home-stage-stats{
        grid-template-columns:1fr 1fr;
    }

    .admin-home-update-stats{
        grid-template-columns:1fr 1fr;
    }

    .admin-homepage-shell .lobby-title h1{
        font-size:40px;
    }
}

/* Separate admin pages: scoped to preserve the public store and account styles. */
body.admin-body [hidden] { display: none !important; }
.admin-page-link { display:block; margin:0; padding:12px 14px; border-radius:8px; color:#ccc; text-decoration:none; font-weight:700; }
.admin-page-link:hover, .admin-page-link[aria-current="page"] { color:#fff; background:#302020; box-shadow:inset 3px 0 #e32936; }
.admin-page-link:focus-visible { outline:2px solid #ff5360; outline-offset:2px; }

/* Account deactivation confirmation, above the account profile modal. */
.account-deactivate-dialog {
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 28px;
    color: #f5f5f5;
    background: #191919;
    border: 1px solid #393030;
    border-top: 3px solid #ed2939;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,.65);
}
.account-deactivate-dialog::backdrop { background: rgba(0,0,0,.76); }
.account-deactivate-dialog h2 { margin: 14px 0; font-size: 25px; }
.account-deactivate-dialog p { color: #bcbcbc; line-height: 1.6; overflow-wrap: anywhere; }
.account-deactivate-dialog strong { color: #fff; }
.account-deactivate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.account-deactivate-actions button { flex: 1 1 150px; min-height: 46px; margin: 0; padding: 12px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.account-deactivate-actions .account-deactivate-cancel { background: #292929; color: #fff; border: 1px solid #484848; }
.account-deactivate-actions .account-deactivate-confirm { background: #d92132; color: #fff; border: 1px solid #ed2939; }
.account-deactivate-actions button:hover { filter: brightness(1.15); }
.account-deactivate-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* Keep the staff profile photo inside its own panel at every viewport size. */
body.admin-body .admin-view[data-view="profile"] .admin-panel {
    min-width: 0;
}
body.admin-body .profile-photo-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    min-width: 0;
}
body.admin-body .profile-avatar-wrap {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    overflow: hidden;
    border-radius: 50%;
    background: #252525;
    border: 1px solid #393939;
}
body.admin-body .profile-avatar-large {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}
body.admin-body .profile-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}
body.admin-body .profile-photo-editor > div:last-child {
    flex: 1 1 160px;
    min-width: 0;
}
body.admin-body .profile-photo-button {
    display: inline-block;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid #484848;
    border-radius: 8px;
    background: #292929;
    color: #fff;
    cursor: pointer;
    overflow-wrap: anywhere;
}
body.admin-body .profile-avatar-large[hidden] {
    display: none !important;
}


/* Image containment: keep intrinsic upload dimensions out of page layout. */
img { max-width: 100%; }
img[hidden] { display: none !important; }
.checkout-item-image,
.admin-order-item > img {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
    border-radius: 8px;
    background: #111;
}
.checkout-item,
.admin-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.checkout-item > div,
.admin-order-item > div {
    min-width: 0;
    overflow-wrap: anywhere;
}
#image-preview,
#category-image-preview,
#edit-image-preview,
#edit-category-image-preview,
.size-product-image {
    max-width: 100%;
}
.account-profile-avatar-wrap,
.account-staff-avatar,
.lobby-roster-avatar,
.active-staff-avatar {
    flex-shrink: 0;
    overflow: hidden;
}
.product-card,
.shop-category-card,
.merch-operator-image-wrap {
    min-width: 0;
}