:root {
    --gxup-v30-orange: #ff7417;
    --gxup-v30-orange-2: #ff9f1c;
    --gxup-v30-teal: #14b8a6;
    --gxup-v30-green: #10b981;
    --gxup-v30-blue: #3b82f6;
    --gxup-v30-yellow: #facc15;
    --gxup-v30-danger: #ef4444;
    --gxup-v30-radius-xl: 28px;
    --gxup-v30-radius-lg: 22px;
    --gxup-v30-radius-md: 16px;
    --gxup-v30-ease: cubic-bezier(.2,.8,.2,1);
}

.gxup-v30-root,
.gxup-v30-root * {
    box-sizing: border-box;
}

.gxup-v30-root {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-top: clamp(22px, 3vw, 42px);
    padding-bottom: clamp(34px, 4vw, 56px);
}

.gxup-v30-root::before,
.gxup-v30-root::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -3;
    border-radius: 999px;
}

.gxup-v30-root::before {
    width: min(44vw, 560px);
    height: min(44vw, 560px);
    left: max(-260px, calc(50% - 890px));
    top: 60px;
    background: radial-gradient(circle, rgba(255, 116, 23, .12), rgba(255, 116, 23, 0) 70%);
}

.gxup-v30-root::after {
    width: min(46vw, 620px);
    height: min(46vw, 620px);
    right: max(-320px, calc(50% - 930px));
    top: 120px;
    background: radial-gradient(circle, rgba(20, 184, 166, .11), rgba(20, 184, 166, 0) 72%);
}

.gxup-v30-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(148, 163, 184, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .10) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
}

body.dark .gxup-v30-bg,
html.dark .gxup-v30-bg {
    opacity: .28;
}

.gxup-v30-container {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.gxup-v30-breadcrumb {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    padding: 6px 10px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .05) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

body.dark .gxup-v30-breadcrumb,
html.dark .gxup-v30-breadcrumb {
    background: rgba(15, 23, 42, .58) !important;
    border-color: rgba(148, 163, 184, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.gxup-v30-breadcrumb a,
.gxup-v30-breadcrumb .breadcrumb-item {
    font-weight: 750;
}

/* Layout */
.gxup-v30-layout {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
    gap: clamp(18px, 2.2vw, 30px) !important;
    align-items: start !important;
}

.gxup-v30-sidebar {
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
    z-index: 2 !important;
}

.gxup-v30-main {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
}

.gxup-v30-main::before {
    content: "";
    position: absolute;
    inset: -18px -22px auto -22px;
    height: 190px;
    pointer-events: none;
    z-index: -1;
    border-radius: 36px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 116, 23, .09), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(20, 184, 166, .08), transparent 40%);
    opacity: .72;
}

body.dark .gxup-v30-main::before,
html.dark .gxup-v30-main::before {
    opacity: .9;
}

/* Universal surfaces */
.gxup-v30-surface-card,
.gxup-v30-order-card,
.gxup-v30-ticket-card,
.gxup-v30-chat-card,
.gxup-v30-mini-card,
.gxup-v30-empty-state,
.gxup-v30-filter,
.gxup-v30-stat-card,
.gxup-v30-action-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border-radius: var(--gxup-v30-radius-lg) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 116, 23, .08), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .07), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)) !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255,255,255,.62) !important;
    color: var(--text-main) !important;
}

body.dark .gxup-v30-surface-card,
html.dark .gxup-v30-surface-card,
body.dark .gxup-v30-order-card,
html.dark .gxup-v30-order-card,
body.dark .gxup-v30-ticket-card,
html.dark .gxup-v30-ticket-card,
body.dark .gxup-v30-chat-card,
html.dark .gxup-v30-chat-card,
body.dark .gxup-v30-mini-card,
html.dark .gxup-v30-mini-card,
body.dark .gxup-v30-empty-state,
html.dark .gxup-v30-empty-state,
body.dark .gxup-v30-filter,
html.dark .gxup-v30-filter,
body.dark .gxup-v30-stat-card,
html.dark .gxup-v30-stat-card,
body.dark .gxup-v30-action-card,
html.dark .gxup-v30-action-card {
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 116, 23, .105), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(20, 184, 166, .095), transparent 35%),
        linear-gradient(180deg, rgba(17, 24, 39, .86), rgba(8, 13, 26, .94)) !important;
    border-color: rgba(148, 163, 184, .155) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.gxup-v30-surface-card::before,
.gxup-v30-order-card::before,
.gxup-v30-ticket-card::before,
.gxup-v30-chat-card::before,
.gxup-v30-mini-card::before,
.gxup-v30-empty-state::before,
.gxup-v30-filter::before,
.gxup-v30-stat-card::before,
.gxup-v30-action-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(90deg, var(--gxup-v30-orange), var(--gxup-v30-teal)) left bottom / 0 2px no-repeat,
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 46%, transparent 58%) -120% 0 / 56% 100% no-repeat;
    transition: opacity .18s ease, background-size .22s ease, background-position .28s ease;
}

.gxup-v30-surface-card::after,
.gxup-v30-order-card::after,
.gxup-v30-ticket-card::after,
.gxup-v30-chat-card::after,
.gxup-v30-stat-card::after,
.gxup-v30-action-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gxup-v30-orange), var(--gxup-v30-teal));
    opacity: .52;
    transform: scaleY(.55);
    transform-origin: center;
    transition: opacity .18s ease, transform .20s var(--gxup-v30-ease);
}

/* Stats */
.gxup-v30-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 22px) !important;
    width: 100% !important;
    margin-bottom: clamp(18px, 2vw, 26px) !important;
}

.gxup-v30-stat-card {
    min-width: 0 !important;
    min-height: 168px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    padding: 26px 28px !important;
    text-decoration: none !important;
    transform: translate3d(0,0,0) !important;
    transform-style: flat !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .20s var(--gxup-v30-ease) !important;
}

.gxup-v30-stat-card .gmx-stat-card-glow,
.gxup-v30-stat-card .gmx-stat-card-top,
.gxup-v30-stat-card .gmx-stat-content,
.gxup-v30-stat-card .gmx-stat-progress,
.gxup-v30-stat-card .gmx-stat-tag {
    display: none !important;
}

.gxup-v30-stat-icon {
    position: relative !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 32% 20%, rgba(255,255,255,.26), transparent 36%),
        linear-gradient(135deg, var(--gxup-v30-orange), var(--gxup-v30-orange-2)) !important;
    box-shadow: 0 16px 32px rgba(249, 115, 22, .20) !important;
    transition: transform .20s var(--gxup-v30-ease), box-shadow .18s ease !important;
}

.gxup-v30-stat-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(255, 116, 23, .24);
    opacity: 0;
    transform: scale(.72);
    transition: opacity .18s ease, transform .24s var(--gxup-v30-ease);
    pointer-events: none;
}

.gxup-v30-stat-icon.points,
.gxup-v30-stat-icon:has(.fa-star) {
    background:
        radial-gradient(circle at 32% 20%, rgba(255,255,255,.25), transparent 36%),
        linear-gradient(135deg, var(--gxup-v30-yellow), #f59e0b) !important;
    box-shadow: 0 16px 32px rgba(250, 204, 21, .15) !important;
}

.gxup-v30-stat-icon.ref,
.gxup-v30-stat-icon:has(.fa-users) {
    background:
        radial-gradient(circle at 32% 20%, rgba(255,255,255,.25), transparent 36%),
        linear-gradient(135deg, var(--gxup-v30-green), var(--gxup-v30-teal)) !important;
    box-shadow: 0 16px 32px rgba(16, 185, 129, .15) !important;
}

.gxup-v30-stat-info,
.gxup-v30-stat-info * {
    min-width: 0;
}

.gxup-v30-stat-info {
    flex: 1 1 auto !important;
}

.gxup-v30-stat-info h4,
.gxup-v30-stat-info .gmx-stat-label,
.gxup-v30-root .gmx-stat-label {
    margin: 0 0 7px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: .015em !important;
    text-transform: uppercase !important;
}

.gxup-v30-stat-info .value,
.gxup-v30-root .gmx-stat-value {
    display: block !important;
    max-width: 100% !important;
    color: var(--text-main) !important;
    font-size: clamp(26px, 2.2vw, 34px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Actions */
.gxup-v30-action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.5vw, 16px) !important;
    margin-bottom: clamp(18px, 2vw, 26px) !important;
}

.gxup-v30-action-card {
    min-height: 84px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 18px 16px !important;
    border-radius: 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: var(--text-main) !important;
    font-weight: 850 !important;
    transition: border-color .18s ease, background .18s ease, transform .20s var(--gxup-v30-ease), box-shadow .18s ease !important;
}

.gxup-v30-action-card i {
    color: var(--gxup-v30-orange) !important;
    font-size: 20px;
    transition: transform .20s var(--gxup-v30-ease), color .18s ease;
}

/* Orders and list cards */
.gxup-v30-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 16px !important;
    margin-bottom: 22px !important;
}

.gxup-v30-order-card {
    margin-bottom: 14px !important;
    border-radius: 22px !important;
    transition: border-color .18s ease, background .18s ease, transform .18s var(--gxup-v30-ease), box-shadow .18s ease !important;
}

.gxup-v30-thumb {
    border-radius: 16px !important;
    transition: transform .20s var(--gxup-v30-ease), box-shadow .18s ease !important;
}

.gxup-v30-ticket-wrapper {
    display: grid;
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
    gap: 18px;
}

.gxup-v30-ticket-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
}

.gxup-v30-chat-card {
    min-width: 0;
}

.gxup-v30-table {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.gxup-v30-empty-state {
    padding: 34px 22px !important;
    text-align: center !important;
}

.gxup-v30-surface-card {
    margin-bottom: 24px;
}

.gxup-v30-root .gmx-settings-card__head,
.gxup-v30-root .gmx-card-header {
    border-bottom-color: rgba(148, 163, 184, .14) !important;
}

.gxup-v30-root .gmx-form-input,
.gxup-v30-root .gmx-form-select,
.gxup-v30-root input[type="text"],
.gxup-v30-root input[type="password"],
.gxup-v30-root input[type="email"],
.gxup-v30-root input[type="number"],
.gxup-v30-root select,
.gxup-v30-root textarea {
    max-width: 100%;
}

/* Hover: desktop only, only when not scrolling */
@media (hover:hover) and (pointer:fine) {
    html:not(.gmx-is-scrolling) .gxup-v30-surface-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-order-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-ticket-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-mini-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-action-card:hover {
        transform: translate3d(2px, -3px, 0) !important;
        border-color: rgba(255, 116, 23, .34) !important;
        box-shadow: 0 20px 52px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.68) !important;
    }

    html.dark:not(.gmx-is-scrolling) .gxup-v30-surface-card:hover,
    body.dark:not(.gmx-is-scrolling) .gxup-v30-surface-card:hover,
    html.dark:not(.gmx-is-scrolling) .gxup-v30-order-card:hover,
    body.dark:not(.gmx-is-scrolling) .gxup-v30-order-card:hover,
    html.dark:not(.gmx-is-scrolling) .gxup-v30-ticket-card:hover,
    body.dark:not(.gmx-is-scrolling) .gxup-v30-ticket-card:hover,
    html.dark:not(.gmx-is-scrolling) .gxup-v30-mini-card:hover,
    body.dark:not(.gmx-is-scrolling) .gxup-v30-mini-card:hover,
    html.dark:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover,
    body.dark:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover,
    html.dark:not(.gmx-is-scrolling) .gxup-v30-action-card:hover,
    body.dark:not(.gmx-is-scrolling) .gxup-v30-action-card:hover {
        box-shadow: 0 22px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-surface-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-order-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-ticket-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-mini-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-action-card:hover::before {
        opacity: 1;
        background-size: 68% 2px, 56% 100%;
        background-position: left bottom, 130% 0;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-surface-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-order-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-ticket-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-action-card:hover::after {
        opacity: .86;
        transform: scaleY(.92);
    }

    html:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover .gxup-v30-stat-icon,
    html:not(.gmx-is-scrolling) .gxup-v30-action-card:hover i,
    html:not(.gmx-is-scrolling) .gxup-v30-surface-card:hover .gxup-v30-stat-icon {
        transform: scale(1.045) rotate(4deg) !important;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-stat-card:hover .gxup-v30-stat-icon::after {
        opacity: .95;
        transform: scale(1.03);
    }

    html:not(.gmx-is-scrolling) .gxup-v30-order-card:hover .gxup-v30-thumb {
        transform: scale(1.035) !important;
    }
}

/* While scrolling: no motion, because browsers already suffer enough. */
.gmx-is-scrolling .gxup-v30-surface-card,
.gmx-is-scrolling .gxup-v30-order-card,
.gmx-is-scrolling .gxup-v30-ticket-card,
.gmx-is-scrolling .gxup-v30-mini-card,
.gmx-is-scrolling .gxup-v30-stat-card,
.gmx-is-scrolling .gxup-v30-action-card,
.gmx-is-scrolling .gxup-v30-thumb,
.gmx-is-scrolling .gxup-v30-stat-icon {
    transform: none !important;
    transition-duration: .01s !important;
}

/* Mobile */
@media (max-width: 1199px) {
    .gxup-v30-layout {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .gxup-v30-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gxup-v30-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    .gxup-v30-root {
        overflow: visible;
        padding-top: 20px;
        padding-bottom: 92px;
    }

    .gxup-v30-layout {
        display: block !important;
    }

    .gxup-v30-sidebar {
        position: relative !important;
        top: auto !important;
        margin-bottom: 18px !important;
    }

    .gxup-v30-main::before {
        display: none;
    }

    .gxup-v30-stat-grid,
    .gxup-v30-action-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .gxup-v30-stat-card {
        min-height: 118px !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .gxup-v30-stat-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        flex-basis: 52px !important;
        border-radius: 18px !important;
    }

    .gxup-v30-filter {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }

    .gxup-v30-ticket-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .gxup-v30-root {
        padding-top: 16px;
        padding-bottom: 104px;
    }

    .gxup-v30-root::before,
    .gxup-v30-root::after,
    .gxup-v30-bg {
        display: none;
    }

    .gxup-v30-stat-card {
        gap: 14px !important;
        padding: 16px !important;
        min-height: 108px !important;
    }

    .gxup-v30-stat-info .value,
    .gxup-v30-root .gmx-stat-value {
        font-size: clamp(23px, 7vw, 30px) !important;
    }

    .gxup-v30-action-card {
        min-height: 72px !important;
        border-radius: 18px !important;
        padding: 14px !important;
    }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce) {
    .gxup-v30-root *,
    .gxup-v30-root *::before,
    .gxup-v30-root *::after {
        animation: none !important;
        transition-duration: .01s !important;
    }

    .gxup-v30-surface-card,
    .gxup-v30-order-card,
    .gxup-v30-ticket-card,
    .gxup-v30-mini-card,
    .gxup-v30-stat-card,
    .gxup-v30-action-card,
    .gxup-v30-thumb,
    .gxup-v30-stat-icon {
        transform: none !important;
    }
}

/* v31 panel hover/performance patch
   The previous v30 hover lifted cards upward too sharply and some mobile browsers kept
   recalculating hover states while scrolling. This layer keeps the concept design, but
   makes panel interactions calm, mostly color/border based, and disables motion on phones. */

.gxup-v30-root {
    -webkit-tap-highlight-color: transparent;
}

.gxup-v30-surface-card,
.gxup-v30-order-card,
.gxup-v30-ticket-card,
.gxup-v30-chat-card,
.gxup-v30-mini-card,
.gxup-v30-empty-state,
.gxup-v30-filter,
.gxup-v30-stat-card,
.gxup-v30-action-card {
    will-change: auto !important;
    transform: none !important;
    transition:
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease !important;
}

.gxup-v30-stat-icon,
.gxup-v30-action-card i,
.gxup-v30-thumb {
    will-change: auto !important;
    transform: none !important;
    transition:
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease !important;
}

.gxup-v30-surface-card::before,
.gxup-v30-order-card::before,
.gxup-v30-ticket-card::before,
.gxup-v30-chat-card::before,
.gxup-v30-mini-card::before,
.gxup-v30-empty-state::before,
.gxup-v30-filter::before,
.gxup-v30-stat-card::before,
.gxup-v30-action-card::before {
    background: linear-gradient(90deg, var(--gxup-v30-orange), var(--gxup-v30-teal)) left bottom / 0 2px no-repeat !important;
    transition: opacity .18s ease, background-size .22s ease !important;
}

@media (hover:hover) and (pointer:fine) {
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-mini-card:hover,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-mini-card:hover,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover {
        transform: none !important;
        border-color: rgba(255, 116, 23, .30) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.50) !important;
    }

    html.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover,
    body.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover,
    html.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover,
    body.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover,
    html.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover,
    body.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover,
    html.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-mini-card:hover,
    body.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-mini-card:hover,
    html.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover,
    body.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover,
    html.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover,
    body.dark:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover {
        box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045) !important;
    }

    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover::before,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover::before,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover::before,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-mini-card:hover::before,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover::before,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover::before,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover::before,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover::before,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover::before,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-mini-card:hover::before,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover::before,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover::before {
        opacity: 1 !important;
        background-size: 48% 2px !important;
        background-position: left bottom !important;
    }

    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover::after,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover::after,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover::after,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover::after,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover::after,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover::after,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover::after,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-ticket-card:hover::after,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover::after,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover::after {
        opacity: .72 !important;
        transform: scaleY(.76) !important;
    }

    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover .gxup-v30-stat-icon,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover i,
    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover .gxup-v30-stat-icon,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-stat-card:hover .gxup-v30-stat-icon,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-action-card:hover i,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-surface-card:hover .gxup-v30-stat-icon {
        transform: none !important;
        box-shadow: 0 12px 24px rgba(249, 115, 22, .18) !important;
    }

    html:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover .gxup-v30-thumb,
    body:not(.gmx-is-scrolling):not(.gxup-v30-motion-lite) .gxup-v30-order-card:hover .gxup-v30-thumb {
        transform: none !important;
    }
}

html.gxup-v30-motion-lite .gxup-v30-root::before,
html.gxup-v30-motion-lite .gxup-v30-root::after,
html.gxup-v30-motion-lite .gxup-v30-bg,
body.gxup-v30-motion-lite .gxup-v30-root::before,
body.gxup-v30-motion-lite .gxup-v30-root::after,
body.gxup-v30-motion-lite .gxup-v30-bg {
    display: none !important;
}

html.gxup-v30-motion-lite .gxup-v30-root *,
html.gxup-v30-motion-lite .gxup-v30-root *::before,
html.gxup-v30-motion-lite .gxup-v30-root *::after,
body.gxup-v30-motion-lite .gxup-v30-root *,
body.gxup-v30-motion-lite .gxup-v30-root *::before,
body.gxup-v30-motion-lite .gxup-v30-root *::after {
    animation: none !important;
    transition-duration: .01s !important;
}

html.gxup-v30-motion-lite .gxup-v30-surface-card,
html.gxup-v30-motion-lite .gxup-v30-order-card,
html.gxup-v30-motion-lite .gxup-v30-ticket-card,
html.gxup-v30-motion-lite .gxup-v30-chat-card,
html.gxup-v30-motion-lite .gxup-v30-mini-card,
html.gxup-v30-motion-lite .gxup-v30-empty-state,
html.gxup-v30-motion-lite .gxup-v30-filter,
html.gxup-v30-motion-lite .gxup-v30-stat-card,
html.gxup-v30-motion-lite .gxup-v30-action-card,
body.gxup-v30-motion-lite .gxup-v30-surface-card,
body.gxup-v30-motion-lite .gxup-v30-order-card,
body.gxup-v30-motion-lite .gxup-v30-ticket-card,
body.gxup-v30-motion-lite .gxup-v30-chat-card,
body.gxup-v30-motion-lite .gxup-v30-mini-card,
body.gxup-v30-motion-lite .gxup-v30-empty-state,
body.gxup-v30-motion-lite .gxup-v30-filter,
body.gxup-v30-motion-lite .gxup-v30-stat-card,
body.gxup-v30-motion-lite .gxup-v30-action-card {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html.gxup-v30-motion-lite .gxup-v30-surface-card:hover,
html.gxup-v30-motion-lite .gxup-v30-order-card:hover,
html.gxup-v30-motion-lite .gxup-v30-ticket-card:hover,
html.gxup-v30-motion-lite .gxup-v30-mini-card:hover,
html.gxup-v30-motion-lite .gxup-v30-stat-card:hover,
html.gxup-v30-motion-lite .gxup-v30-action-card:hover,
body.gxup-v30-motion-lite .gxup-v30-surface-card:hover,
body.gxup-v30-motion-lite .gxup-v30-order-card:hover,
body.gxup-v30-motion-lite .gxup-v30-ticket-card:hover,
body.gxup-v30-motion-lite .gxup-v30-mini-card:hover,
body.gxup-v30-motion-lite .gxup-v30-stat-card:hover,
body.gxup-v30-motion-lite .gxup-v30-action-card:hover {
    transform: none !important;
    border-color: rgba(148, 163, 184, .18) !important;
}

html.gxup-v30-motion-lite .gxup-v30-stat-icon,
html.gxup-v30-motion-lite .gxup-v30-action-card i,
html.gxup-v30-motion-lite .gxup-v30-thumb,
body.gxup-v30-motion-lite .gxup-v30-stat-icon,
body.gxup-v30-motion-lite .gxup-v30-action-card i,
body.gxup-v30-motion-lite .gxup-v30-thumb {
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 991px), (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce) {
    .gxup-v30-root::before,
    .gxup-v30-root::after,
    .gxup-v30-bg {
        display: none !important;
    }

    .gxup-v30-root *,
    .gxup-v30-root *::before,
    .gxup-v30-root *::after {
        animation: none !important;
        transition-duration: .01s !important;
        scroll-behavior: auto !important;
    }

    .gxup-v30-surface-card,
    .gxup-v30-order-card,
    .gxup-v30-ticket-card,
    .gxup-v30-chat-card,
    .gxup-v30-mini-card,
    .gxup-v30-empty-state,
    .gxup-v30-filter,
    .gxup-v30-stat-card,
    .gxup-v30-action-card,
    .gxup-v30-stat-icon,
    .gxup-v30-action-card i,
    .gxup-v30-thumb {
        transform: none !important;
        will-change: auto !important;
    }

    .gxup-v30-surface-card:hover,
    .gxup-v30-order-card:hover,
    .gxup-v30-ticket-card:hover,
    .gxup-v30-mini-card:hover,
    .gxup-v30-stat-card:hover,
    .gxup-v30-action-card:hover,
    .gxup-v30-stat-card:hover .gxup-v30-stat-icon,
    .gxup-v30-action-card:hover i,
    .gxup-v30-order-card:hover .gxup-v30-thumb {
        transform: none !important;
    }
}


/* v35 sidebar reset
   The sidebar/menu itself must come from the main app CSS sample.
   This file only keeps the transparent loader and dashboard-card polish. */
#page-loader {
    background: transparent !important;
    pointer-events: none !important;
}

.gxup-v30-root {
    --gxup-v30-hover-ease: cubic-bezier(.2, .75, .25, 1);
    --gxup-v30-hover-time: .34s;
    --gxup-v30-brand: var(--brand-primary, var(--gxup-v30-orange));
    --gxup-v30-brand-soft: color-mix(in srgb, var(--gxup-v30-brand) 5%, transparent);
    --gxup-v30-brand-soft-strong: color-mix(in srgb, var(--gxup-v30-brand) 12%, transparent);
    --gxup-v30-brand-shadow: color-mix(in srgb, var(--gxup-v30-brand) 22%, transparent);
}

/* Sidebar exact-sample protection: remove the v30/v34 override layer and let the
   base app CSS control .gmx-sidebar / .gmx-side-link / .side-icon. */
.gxup-v30-root .gmx-sidebar,
.gxup-v30-root .gmx-sidebar-profile-box,
.gxup-v30-root .gmx-sidebar-nav,
.gxup-v30-root .nav-group-title,
.gxup-v30-root .gmx-side-link,
.gxup-v30-root .side-icon,
.gxup-v30-root .gmx-slide-arrow {
    /* intentionally empty: base app-modern/all.min rules win */
}

/* Main dashboard card hover: keep the effect, but make it GPU-safe and smooth. */
.gxup-v30-surface-card,
.gxup-v30-order-card,
.gxup-v30-ticket-card,
.gxup-v30-chat-card,
.gxup-v30-mini-card,
.gxup-v30-empty-state,
.gxup-v30-filter,
.gxup-v30-stat-card,
.gxup-v30-action-card {
    backface-visibility: hidden !important;
    transform: translate3d(0,0,0) !important;
    will-change: transform, border-color, box-shadow !important;
    transition:
        transform var(--gxup-v30-hover-time) var(--gxup-v30-hover-ease),
        border-color var(--gxup-v30-hover-time) ease,
        background-color var(--gxup-v30-hover-time) ease,
        box-shadow var(--gxup-v30-hover-time) ease !important;
}

.gxup-v30-stat-icon,
.gxup-v30-action-card i,
.gxup-v30-thumb {
    backface-visibility: hidden !important;
    transform: translate3d(0,0,0) !important;
    transition:
        transform var(--gxup-v30-hover-time) var(--gxup-v30-hover-ease),
        color .24s ease,
        background-color var(--gxup-v30-hover-time) ease,
        box-shadow var(--gxup-v30-hover-time) ease !important;
}

@media (hover:hover) and (pointer:fine) {
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-surface-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-order-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-ticket-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-mini-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-stat-card:hover,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-action-card:hover {
        transform: translate3d(0,-4px,0) !important;
        border-color: color-mix(in srgb, var(--gxup-v30-brand) 34%, transparent) !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-surface-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-order-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-ticket-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-mini-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-stat-card:hover::before,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-action-card:hover::before {
        opacity: 1 !important;
        background-size: 54% 2px !important;
        background-position: left bottom !important;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-surface-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-order-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-ticket-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-stat-card:hover::after,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-action-card:hover::after {
        opacity: .80 !important;
        transform: scaleY(.82) !important;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-stat-card:hover .gxup-v30-stat-icon,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-action-card:hover i,
    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-surface-card:hover .gxup-v30-stat-icon {
        transform: translate3d(0,-1px,0) scale(1.055) !important;
        box-shadow: 0 12px 24px var(--gxup-v30-brand-shadow) !important;
    }

    html:not(.gmx-is-scrolling) .gxup-v30-root .gxup-v30-order-card:hover .gxup-v30-thumb {
        transform: translate3d(0,-1px,0) scale(1.035) !important;
    }
}

/* The balance amount must show the whole value, not CSS-made suspense dots. */
.gxup-v30-balance-value,
.gxup-v30-stat-info .gxup-v30-balance-value {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    letter-spacing: -.025em !important;
}

.gxup-v30-balance-amount {
    display: inline-block !important;
    min-width: 0 !important;
}

.gxup-v30-balance-currency {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: var(--gxup-v30-brand) !important;
    font-size: .54em !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    margin-left: 1px !important;
}

.gxup-v30-stat-info .value,
.gxup-v30-root .gmx-stat-value {
    text-overflow: clip !important;
}

@media (max-width: 1199px) {
    .gxup-v30-balance-value,
    .gxup-v30-stat-info .value,
    .gxup-v30-root .gmx-stat-value {
        font-size: clamp(23px, 2.7vw, 30px) !important;
    }
}


/* v35: no sidebar mobile override here, base app CSS handles it. */


@media (max-width: 575px) {
    .gxup-v30-balance-value,
    .gxup-v30-stat-info .value,
    .gxup-v30-root .gmx-stat-value {
        font-size: clamp(22px, 6.5vw, 28px) !important;
    }

    .gxup-v30-balance-currency {
        font-size: .50em !important;
    }
}

/* v35 exact sample sidebar, Gamex colors
   Mirrors the provided sample CSS. Only brand variables decide the color. */
.gxup-v30-root .gmx-sidebar {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: sticky !important;
    top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    height: max-content !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.02) !important;
    transition: all .3s ease !important;
}
body.dark .gxup-v30-root .gmx-sidebar,
html.dark .gxup-v30-root .gmx-sidebar {
    box-shadow: 0 10px 40px rgba(0,0,0,.15) !important;
}
.gxup-v30-root .gmx-sidebar-toggle {
    width: 100% !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--text-main) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background .3s !important;
}
.gxup-v30-root .gmx-sidebar-toggle:hover {
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent) !important;
}
.gxup-v30-root .gmx-sidebar-toggle .toggle-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.gxup-v30-root .gmx-sidebar-toggle .toggle-left i {
    color: var(--brand-primary) !important;
    font-size: 18px !important;
}
.gxup-v30-root .gmx-sidebar-toggle .toggle-icon {
    color: var(--text-muted) !important;
    transition: transform .3s ease !important;
}
.gxup-v30-root .gmx-sidebar.is-open .gmx-sidebar-toggle .toggle-icon {
    transform: rotate(180deg) !important;
}
.gxup-v30-root .gmx-sidebar-inner {
    display: block !important;
}
.gxup-v30-root .gmx-sidebar-profile-box {
    padding: 30px 20px 20px !important;
    background: var(--bg-body) !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.gxup-v30-root .gmx-sp-avatar-wrap {
    position: relative !important;
    margin-bottom: 15px !important;
}
.gxup-v30-root .gmx-sp-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    padding: 3px !important;
    border: 3px solid var(--border-color) !important;
    position: relative !important;
    transition: .3s !important;
}
.gxup-v30-root .gmx-sp-avatar img,
.gxup-v30-root .gmx-sp-avatar .user-initial {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.gxup-v30-root .gmx-sp-avatar .user-initial {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}
.gxup-v30-root .avatar-edit-btn {
    position: absolute !important;
    bottom: 0 !important;
    right: -5px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--brand-primary) !important;
    color: #fff !important;
    font-size: 12px !important;
    cursor: pointer !important;
    border: 2px solid var(--bg-body) !important;
    box-shadow: none !important;
    transition: .2s !important;
}
.gxup-v30-root .avatar-edit-btn:hover {
    transform: scale(1.1) !important;
}
.gxup-v30-root .gmx-sp-info {
    width: 100% !important;
}
.gxup-v30-root .gmx-sp-name {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--text-main) !important;
    margin: 0 0 5px !important;
}
.gxup-v30-root .gmx-sp-email {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin: 0 0 15px !important;
    word-break: break-all !important;
}
.gxup-v30-root .gmx-sp-badges {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}
.gxup-v30-root .gmx-sp-badge-status {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
}
.gxup-v30-root .gmx-sp-badge-id {
    color: var(--text-muted) !important;
    background: var(--bg-surface) !important;
    padding: 4px 10px !important;
    border: 1px solid var(--border-color) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}
.gxup-v30-root .gmx-sp-verify-alert {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ef4444 !important;
    background: rgba(239,68,68,.1) !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
}
.gxup-v30-root .gmx-sidebar-nav {
    padding: 10px !important;
    max-height: calc(100vh - 350px) !important;
    overflow-y: auto !important;
}
.gxup-v30-root .nav-group-title {
    font-size: 10px !important;
    font-weight: 900 !important;
    color: var(--text-muted) !important;
    padding: 15px 15px 5px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}
.gxup-v30-root .gmx-side-link {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    text-decoration: none !important;
    transition: all .3s ease !important;
    margin-bottom: 2px !important;
    box-shadow: none !important;
    transform: none !important;
}
.gxup-v30-root .side-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 10px !important;
    background: var(--bg-body) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    font-size: 14px !important;
    transition: .3s !important;
    box-shadow: none !important;
    transform: none !important;
}
.gxup-v30-root .gmx-side-badge {
    margin-left: auto !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 2px 8px !important;
    border-radius: 50px !important;
}
.gxup-v30-root .gmx-side-link.is-active,
.gxup-v30-root .gmx-side-link:hover {
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent) !important;
    transform: translateX(5px) !important;
    color: var(--brand-primary) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.gxup-v30-root .gmx-side-link.is-active .side-icon,
.gxup-v30-root .gmx-side-link:hover .side-icon {
    background: var(--brand-primary) !important;
    color: #fff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 5px 10px rgba(249,115,22,.3) !important;
}
.gxup-v30-root .gmx-slide-arrow {
    margin-left: auto !important;
    font-size: 14px !important;
    color: var(--brand-primary) !important;
    opacity: 0 !important;
    transform: translateX(-15px) !important;
    transition: all .3s cubic-bezier(.4,0,.2,1) !important;
}
.gxup-v30-root .gmx-side-link.is-active .gmx-slide-arrow,
.gxup-v30-root .gmx-side-link:hover .gmx-slide-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.gxup-v30-root .c-pink{color:#ec4899!important}
.gxup-v30-root .c-blue{color:#3b82f6!important}
.gxup-v30-root .c-green{color:#10b981!important}
.gxup-v30-root .c-orange{color:#f97316!important}
.gxup-v30-root .c-cyan{color:#06b6d4!important}
.gxup-v30-root .c-purple{color:#a855f7!important}
.gxup-v30-root .c-indigo{color:#6366f1!important}
.gxup-v30-root .c-red{color:#ef4444!important}
.gxup-v30-root .c-gold{color:#eab308!important}
.gxup-v30-root .c-gray{color:var(--text-muted)!important}
@media (max-width: 992px) {
    .gxup-v30-root .gmx-sidebar {
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        position: relative !important;
        top: 0 !important;
    }
    .gxup-v30-root .gmx-sidebar-nav {
        max-height: unset !important;
        overflow-y: visible !important;
    }
}
@media (max-width: 768px) {
    .gxup-v30-root .gmx-sidebar {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 20px !important;
    }
    .gxup-v30-root .gmx-sidebar-inner {
        display: none !important;
    }
    .gxup-v30-root .gmx-sidebar.is-open .gmx-sidebar-inner {
        display: block !important;
        animation: fadeIn .3s ease !important;
    }
}
@media (min-width: 769px) {
    .gxup-v30-root .gmx-sidebar-toggle {
        display: none !important;
    }
}