/* (c) SMMViking - smmviking.com - All rights reserved. Unauthorized copying or reuse of this theme is prohibited. جميع الحقوق محفوظة لموقع SMMViking */
:root {
    --main-color: #8049eb;
    --main-opacity: color-mix(in srgb,var(--nv-v) 14%,transparent);
    --secondary-color: #11101a;
    --bg-color: #07070b;
    --border-color: color-mix(in srgb,var(--nv-v2) 22%,transparent);
    --text-main: #f9fafb;
    --text-light: #b7b3c8;
    --shadow-color: rgba(0, 0, 0, .48);
    --card-bg: #171426;
    --td-color: color-mix(in srgb,var(--nv-v) 6%,transparent);
    --place-color: #aaa6bb
}

html.dark {
    --main-opacity: #a8a19026;
    --border-color: #2a3444;
    --secondary-color: #ffffff0a;
    --bg-color: #0a0f1b;
    --text-main: #f9fafb;
    --text-light: #a0aec0;
    --shadow-color: #00000066;
    --card-bg: #11151c;
    --td-color: rgba(255, 255, 255, .04);
    --place-color: #9ca3af
}

html[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] {
    direction: ltr;
}

html {
    font-family: Alexandria, serif;
    transition: all .3s ease-in-out;
    background: var(--bg-color);
    color: var(--text-main)
}

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

body {
    overflow-x: hidden;
    line-height: 1.42857143;
    z-index: 0;
    position: relative
}

a {
    text-decoration: none
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%
}

.main-wrapper {
    display: flex
}

.sidebar-folded .main-wrapper .page-content {
    width: 100% !important;
    margin-inline-start: 0 !important
}

.main-wrapper .page-content {
    background-color: inherit;
    min-height: 100vh;
    width: calc(100% - 240px);
    margin-inline-start: 240px;
    display: flex;
    flex-direction: column;
    transition: margin .1s ease, width .1s ease
}

@media (max-width:991px) {
    .main-wrapper .page-content {
        margin-right: 0;
        width: 100%
    }
}

html .sidebar {
    right: 0
}

.sidebar {
    width: 240px;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    transition: width .1s ease, margin .1s ease-in-out;
    z-index: 999
}

.sidebar-folded:not(.open-sidebar-folded) .sidebar {
    width: 0
}

.sidebar .sidebar-header {
    background: var(--bg-color);
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    border-left: 1px solid var(--border-color);
    z-index: 999;
    width: 240px;
    transition: width .1s ease
}

.sidebar-open .sidebar .sidebar-header {
    border-bottom: 1px solid var(--border-color)
}

.sidebar .sidebar-header .brand {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease;
    font-weight: 700;
    font-size: 25px;
    color: var(--main-color)
}

.sidebar .sidebar-header .sidebar-toggler {
    cursor: pointer;
    width: 18px
}

.sidebar .sidebar-header .sidebar-toggler span {
    display: block;
    width: 100%;
    border-radius: 3px;
    height: 2px;
    background: #7987a1;
    transition: all .3s;
    position: relative
}

.sidebar .sidebar-header .sidebar-toggler span+span {
    margin-top: 4px
}

.sidebar .sidebar-header .sidebar-toggler.active span:first-child {
    animation: ease .6s top forwards
}

.sidebar .sidebar-header .sidebar-toggler.not-active span:first-child {
    animation: ease .6s top-2 forwards
}

.sidebar .sidebar-header .sidebar-toggler.active span:nth-child(2) {
    animation: ease .6s scaled forwards
}

.sidebar .sidebar-header .sidebar-toggler.not-active span:nth-child(2) {
    animation: ease .6s scaled-2 forwards
}

.sidebar .sidebar-header .sidebar-toggler.active span:nth-child(3) {
    animation: ease .6s bottom forwards
}

.sidebar .sidebar-header .sidebar-toggler.not-active span:nth-child(3) {
    animation: ease .6s bottom-2 forwards
}

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0)
    }

    50% {
        top: 6px;
        transform: rotate(0)
    }

    100% {
        top: 6px;
        transform: rotate(-45deg)
    }
}

@keyframes top-2 {
    0% {
        top: 6px;
        transform: rotate(-45deg)
    }

    50% {
        top: 6px;
        transform: rotate(0)
    }

    100% {
        top: 0;
        transform: rotate(0)
    }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0)
    }

    50% {
        bottom: 6px;
        transform: rotate(0)
    }

    100% {
        bottom: 6px;
        transform: rotate(-135deg)
    }
}

@keyframes bottom-2 {
    0% {
        bottom: 6px;
        transform: rotate(-135deg)
    }

    50% {
        bottom: 6px;
        transform: rotate(0)
    }

    100% {
        bottom: 0;
        transform: rotate(0)
    }
}

@keyframes scaled {
    50% {
        transform: scale(0)
    }

    100% {
        transform: scale(0)
    }
}

@keyframes scaled-2 {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(0)
    }

    100% {
        transform: scale(1)
    }
}

.sidebar .sidebar-body {
    max-height: calc(100% - 60px);
    position: relative;
    border-left: 1px solid var(--border-color);
    height: 100%;
    box-shadow: 0 8px 10px 0 var(--shadow-color);
    background: var(--bg-color);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.sidebar-body .user-box {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid var(--border-color)
}

.sidebar-body .user-box .user-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    cursor: pointer;
    display: block
}

.sidebar-body .user-box .user-avatar .glow {
    position: absolute;
    inset: 0;
    background: var(--main-color);
    border-radius: 50%;
    filter: blur(20px);
    transition: background .3s ease
}

.sidebar-body .user-box .user-avatar .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    z-index: 20
}

.sidebar-body .user-box .user-border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--border-color);
    overflow: hidden;
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 25px var(--shadow-color)
}

.sidebar-body .user-box .user-border>p {
    width: 100%;
    height: 100%;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-color);
    font-size: 1.875rem;
    font-weight: 700
}

.sidebar-body .user-box .username {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: .25rem;
    letter-spacing: -.02em
}

.sidebar-body .user-box .level {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem;
    background: var(--shadow-color);
    color: var(--main-color);
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700
}

.sidebar-body .user-box .user-avatar .go-arrow {
    position: absolute;
    bottom: -8px;
    left: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    color: var(--main-color);
    font-size: 14px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
    transition: .25s ease
}

.sidebar-body .user-box .user-avatar:hover .go-arrow {
    transform: translateX(-4px) translateY(-2px);
    background: var(--main-color);
    color: var(--text-main);
    border-color: var(--main-color)
}

.sidebar-body .user-box .user-avatar:hover .user-border {
    border-color: color-mix(in srgb,var(--nv-v) 55%,transparent)
}

.sidebar-body .user-box .username {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.sidebar-body .user-box .verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--main-opacity);
    border: 1px solid color-mix(in srgb,var(--nv-v) 35%,transparent);
    color: var(--main-color);
    font-size: 14px;
    cursor: default;
    transition: .25s ease
}

.sidebar-body .user-box .verified-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px color-mix(in srgb,var(--nv-v) 25%,transparent)
}

@media (max-width:991px) {
    .sidebar-body .user-box .user-avatar {
        width: 85px;
        height: 85px
    }
}

.sidebar-body .sidebar-menu {
    overflow-y: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1.25rem
}

.orders .table-wrapper::-webkit-scrollbar,
.select2-results>div::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar,
.services-filter .dropdown-menu::-webkit-scrollbar,
.sidebar-body .sidebar-menu::-webkit-scrollbar,
.ticketview .chat::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

.orders .table-wrapper::-webkit-scrollbar-track,
.select2-results>div::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track,
.services-filter .dropdown-menu::-webkit-scrollbar-track,
.sidebar-body .sidebar-menu::-webkit-scrollbar-track,
.ticketview .chat::-webkit-scrollbar-track {
    background-color: var(--secondary-color)
}

.orders .table-wrapper::-webkit-scrollbar-thumb,
.select2-results>div::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb,
.services-filter .dropdown-menu::-webkit-scrollbar-thumb,
.sidebar-body .sidebar-menu::-webkit-scrollbar-thumb,
.ticketview .chat::-webkit-scrollbar-thumb {
    background: var(--main-opacity);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box
}

.sidebar-menu .menu-title {
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main)
}

.sidebar-menu .menu-side {
    margin-top: .625rem;
    border-radius: .75rem;
    border: 1px solid var(--border-color)
}

.sidebar-menu .menu-side .side-title {
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    background-color: var(--secondary-color);
    padding: .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin-bottom: 8px
}

.sidebar-menu .menu-side .nav-menu {
    margin: 0;
    display: flex;
    list-style-type: none;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: .375rem;
    padding: 0 10px 10px
}

.main-wrapper .nav-menu li>a {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: .75rem;
    background-color: var(--bg-color);
    padding: .375rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration-line: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.main-wrapper .nav-menu li.active>a,
.main-wrapper .nav-menu li>a:hover {
    background-color: var(--main-color)
}

.main-wrapper .nav-mob li>a .nav-icon {
    margin-inline-end: .625rem;
    display: inline-flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.main-wrapper .nav-mob li.active>a .nav-icon {
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25))
}

.main-wrapper ul.nav-menu .badge {
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--main-color);
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 50%
}

.main-wrapper .nav-menu li>a .nav-icon .icon {
    display: block;
    background-image: url(https://storage.perfectcdn.com/i831nb/45nlzlmzhegnb7cl.png);
    background-repeat: no-repeat;
    transition: all .3s ease;
    width: 14px;
    height: 14px;
    background-size: 390px 30px
}

.dark .main-wrapper .nav-menu li.active>a .nav-icon .icon,
.dark .main-wrapper .nav-menu li>a:hover .nav-icon .icon {
    background-position-y: 0 !important
}

.dark .main-wrapper .nav-menu li.active>a .nav-icon,
.dark .main-wrapper .nav-menu li>a:hover .nav-icon {
    background-color: #fff !important
}

.dark .main-wrapper .nav-menu li>a .nav-icon .icon,
.main-wrapper .nav-menu li.active>a .nav-icon .icon,
.main-wrapper .nav-menu li>a:hover .nav-icon .icon {
    background-position-y: -15px !important
}



html.dark .main-wrapper .nav-mob li.active>a .nav-icon .icon {
    background-position-y: -15px !important
}



html.dark .main-wrapper .nav-mob li.active>a .nav-icon,
html.dark .main-wrapper .nav-mob li>a:hover .nav-icon {
    background-color: #171426 !important
}



.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-new-order {
    background-position: 0 0;
    width: 13px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-mass-order {
    background-position: -13px 0;
    width: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-services {
    background-position: -25px 0;
    width: 13px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-orders {
    background-position: -38px 0;
    width: 14px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-subscriptions {
    background-position: -52px 0;
    width: 15px;
    height: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-drip-feed {
    background-position: -67px 0;
    width: 12px;
    height: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-refill {
    background-position: -79px 0;
    width: 12px;
    height: 15px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-add-funds {
    background-position: -105px 0;
    width: 13px;
    height: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-tickets {
    background-position: -118px 0;
    height: 15px;
    width: 15px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-child-panel {
    background-position: -147px 0;
    width: 12px;
    height: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-affiliate {
    background-position: -133px 0
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-giveaway {
    background-position: -160px 0;
    width: 13px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-api {
    background-position: -197px 0;
    width: 13px;
    height: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-updates {
    background-position: -173px 0;
    width: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-dashboard {
    background-position: -185px 0;
    width: 12px;
    height: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-notifications {
    background-position: -211px 0;
    width: 12px
}

.main-wrapper .nav-menu li>a .nav-icon .icon.navbar-refund {
    background-position: -99px 1px;
    width: 13px
}

@media (max-width:550px) {
    .sidebar-body .sidebar-menu {
        padding: 0 15px 20px
    }

    .sidebar-menu .menu-title {
        font-size: 10px;
        margin-bottom: 5px
    }

    .sidebar-menu .menu-side .side-title {
        font-size: 15px
    }
}

@media (max-width:991px) {
    .sidebar {
        z-index: 999;
        margin-right: -240px;
        visibility: hidden
    }

    .sidebar-open .sidebar {
        margin-right: 0;
        visibility: visible
    }

    .sidebar-open .main-wrapper::before {
        content: "";
        width: 100vw;
        background: rgba(0, 0, 0, .3);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        transition: all 3s ease;
        z-index: 980
    }
}

.nav-mob {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    display: none;
    grid-template-columns: repeat(5, 1fr);
    padding: 10px;
    z-index: 5
}

.nav-mob li {
    list-style: none
}

.nav-mob a {
    font-size: 10px !important;
    gap: 5px;
    flex-direction: column
}

.nav-mob .nav-icon {
    margin-inline-end: 0 !important
}

.nav-mob li.active>a,
.nav-mob li:hover>a {
    background: 0 0 !important;
    color: var(--main-color)
}

@media (max-width:991px) {
    .nav-mob {
        display: grid
    }

    .page-content .content {
        padding-bottom: 90px !important
    }
}

.sidebar-folded .page-header {
    width: calc(100% - 240px);
    margin-inline-start: 240px
}

.page-header {
    height: 70px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 20px var(--shadow-color)
}

.page-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px
}

.page-header .header-left .subtitle {
    font-size: 10px;
    color: var(--text-main);
    letter-spacing: .2em;
    margin-bottom: 4px
}

.page-header .header-left .header-title h1 {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 700;
    margin-top: 5px
}

.page-header .header-right {
    display: flex;
    align-items: center;
    gap: 12px
}

.page-header .header-left .icon-btn,
.page-header .header-right .icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--main-opacity);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease
}

.page-header .header-left .icon-btn,
.page-header .header-right .icon-btn:hover {
    box-shadow: 0 0 5px var(--shadow-color)
}

.page-header .header-left .icon-btn i,
.page-header .header-right .icon-btn i {
    font-size: 22px
}

.page-header .header-right .notification-btn {
    position: relative
}

.page-header .header-right .divider {
    width: 1px;
    height: 24px;
    background: var(--border-color)
}

.page-header .header-right .balance-box {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 12px;
    padding: 0 16px 0 6px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all .2s ease
}

.page-header .header-right .balance-box .balance-amount {
    color: var(--text-main)
}

.page-header .header-right .balance-box:hover {
    border-color: var(--main-color)
}

.page-header .header-right .wallet-icon {
    width: 32px;
    height: 32px;
    background: var(--main-opacity);
    color: var(--text-main);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-header .header-right .balance-box span {
    font-size: 9px;
    font-weight: 700
}

.page-header .header-right .balance-box strong {
    font-size: 14px
}

.arrow {
    color: #9ca3af
}

.page-header .header-right .dropdown {
    position: relative
}

.page-header .header-right .dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 160px;
    background: var(--bg-color);
    border-radius: 16px;
    overflow: hidden;
    display: none;
    box-shadow: 0 20px 40px var(--shadow-color)
}

.page-header .header-right .dropdown .dropdown-menu a {
    padding: 12px 16px;
    display: block;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none
}

.page-header .header-right .dropdown .dropdown-menu a:hover {
    background: rgba(37, 99, 235, .05)
}

.page-header .header-right .dropdown .dropdown-header {
    padding: 8px 16px;
    font-size: 10px;
    color: var(--text-main);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color)
}

.page-header .header-right .theme-btn {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--main-opacity);
    color: var(--main-color);
    border: none;
    cursor: pointer;
    transition: all .2s ease
}

.page-header .header-right .theme-btn:hover {
    background: var(--main-color);
    color: #fff
}

.page-header .header-right i {
    font-size: 22px
}

.page-header .header-right .logout-btn {
    color: #fff;
    background: #ff4343
}

.mobile-only {
    display: none !important
}

.desktop-only {
    display: block !important
}

@media (max-width:991px) {
    .mobile-only {
        display: flex !important
    }

    .desktop-only {
        display: none !important
    }

    .hidden-mobile {}
}

@media (max-width:500px) {
    .hide-small {
        display: none !important
    }
}

.hidden {
    display: none !important
}

.page-content .content {
    padding: 25px;
    width: 100%
}

.page-content .content>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

html[dir="rtl"] .ti-logout-2 {
    display: block !important
}

html[dir="rtl"] .ti-logout {
    display: none !important
}

.ti-logout-2 {
    display: none
}

.page-content .page-header .balance-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px
}

@media (max-width:768px) {
    .page-content .content {
        padding: 15px
    }
}

.main-boxes {
    width: 100%
}

.main-boxes .stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    margin-bottom: 20px
}

@media (min-width:640px) {
    .main-boxes .stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .main-boxes .stats-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.main-boxes .stat-card {
    position: relative;
    padding: 16px;
    background: var(--secondary-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all .4s ease
}

.main-boxes .stat-card:hover {
    transform: translateY(-4px)
}

.main-boxes .card-bg {
    position: absolute;
    top: -32px;
    inset-inline-start: -32px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    opacity: .15;
    transition: transform .7s ease
}

.main-boxes .stat-card:hover .card-bg {
    transform: scale(1.5)
}

.main-boxes .card-bg.large {
    bottom: -32px;
    inset-inline-end: -32px;
    top: auto;
    inset-inline-start: auto;
    width: 128px;
    height: 128px
}

.main-boxes .card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%
}

.main-boxes .card-content.white {
    color: var(--text-main)
}

.main-boxes .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.main-boxes .card-label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-main)
}

.main-boxes .icon-box {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px
}

.main-boxes .icon-box.primary {
    background: rgba(59, 130, 246, .1);
    color: #3b82f6
}

.main-boxes .icon-box.orange {
    background: rgba(249, 115, 22, .1);
    color: #f97316
}

.main-boxes .icon-box.success {
    background: rgba(34, 197, 94, .1);
    color: #22c55e
}

.main-boxes .card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 4px
}

.main-boxes .card-value small {
    font-size: 12px
}

.main-boxes .card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700
}

.main-boxes .card-meta.primary {
    color: #3b82f6
}

.main-boxes .card-meta.success {
    color: #22c55e
}

.main-boxes .level-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px
}

.main-boxes .level-badge {
    background: var(--main-color);
    color: var(--text-main);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700
}

.main-boxes .progress {
    height: 4px;
    background: var(--secondary-color);
    border-radius: 999px;
    overflow: hidden
}

.main-boxes .progress-bar {
    width: 75%;
    height: 100%;
    background: var(--main-color)
}

.main-boxes .stat-card.balance {
    box-shadow: 0 0 5px rgba(59, 130, 246, .25)
}

.main-boxes .icon-btn-sm {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: var(--text-main);
    cursor: pointer
}

.main-boxes .icon-btn-sm:hover {
    background: rgba(255, 255, 255, .2)
}

.main-boxes .balance-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px
}

.balance-hidden {
    filter: blur(6px);
    user-select: none
}

.main-boxes .balance-row h3 {
    font-size: 22px;
    font-weight: 800
}

.main-boxes .balance-row span {
    font-size: 12px;
    font-weight: 700;
    opacity: .8
}

.main-boxes .add-balance-btn {
    margin-top: auto;
    display: block;
    text-align: center;
    padding: 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    color: var(--text-main);
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    text-decoration: none
}

.main-boxes .add-balance-btn:hover {
    background: rgba(255, 255, 255, .3)
}

.main-boxes .stat-card.primary .card-bg {
    background: #3b82f6
}

.main-boxes .stat-card.orange .card-bg {
    background: #f97316
}

.main-boxes .stat-card.success .card-bg {
    background: #22c55e
}

.main-boxes .stat-card.balance .card-bg {
    background: #fff
}

.main-boxes .level-info {
    cursor: pointer;
    background: 0 0;
    color: var(--text-main);
    border: none;
    outline: 0;
    padding-inline-start: 2px
}

@media (max-width:768px) {
    .main-boxes .stats-grid {
        gap: 10px;
        margin-bottom: 10px
    }

    .main-boxes .stat-card {
        padding: 10px
    }

    .main-boxes .balance-row,
    .main-boxes .card-header {
        margin-bottom: 5px
    }

    .main-boxes .card-label {
        font-size: 10px
    }

    .main-boxes .balance-row h3,
    .main-boxes .card-value {
        font-size: 18px
    }

    .main-boxes .card-value.small {
        font-size: 15px
    }

    .main-boxes .card-meta {
        font-size: 7px
    }

    .main-boxes .stat-card:hover {
        transform: translateY(-1px)
    }
}

.support-boxs {
    padding-bottom: 10px;
    width: 100%
}

.support-boxs .cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.support-boxs .card {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 30px var(--shadow-color);
    transition: .3s ease;
    position: relative;
    overflow: hidden;
    height: 50px;
    width: 100%
}

.support-boxs .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 10%, var(--main-opacity), transparent 55%);
    opacity: .9;
    pointer-events: none
}

.support-boxs .card:hover {
    transform: translateY(-6px);
    border-color: var(--main-color);
    box-shadow: 0 18px 40px var(--shadow-color)
}

.support-boxs .icon-box i {
    font-size: 24px;
    color: var(--main-color)
}

.support-boxs .icon-box.info i {
    color: #25d366
}

.support-boxs .icon-box.tele i {
    color: #3b82f6
}

.support-boxs .title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    position: relative;
    z-index: 2
}

@media (max-width:768px) {
    .support-boxs .icon-box i {
        font-size: 22px
    }

    .support-boxs .card {
        height: 40px
    }

    .support-boxs .title {
        font-size: 11px
    }

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

    .support-boxs .card:hover {
        transform: translateY(-1px)
    }
}

.filter-row {
    width: 100%
}

.filter-row .filter-wrapper {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 20px 30px 20px
}

.filter-row .filter-wrapper h4 {
    font-weight: 600;
    color: var(--text-main);
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.filter-row .hide-filter {
    background-color: var(--bg-color);
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 10px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer
}

.filter-row .hide-filter i {
    margin-inline-end: 3px
}

.filter-row .filter-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-height: 500px;
    margin-top: 15px;
    transition: max-height .3s ease, margin-top .3s ease;
    gap: 10px
}

.filter-row .filter-list.open {
    max-height: 0;
    margin-top: 0;
    overflow: hidden
}

.filter-row .filter-list li {
    flex: 1 1 calc(100% / 7 - 10px);
    box-sizing: border-box
}

.filter-row .filter-list li .brand-category {
    padding: 10px 22px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    width: 100%;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.filter-row .filter-list li .brand-category.active {
    background-color: var(--main-color);
    color: var(--text-main)
}

.filter-row .filter-list li .brand-category:hover {
    box-shadow: 0 5px 10px var(--shadow-color);
    transform: translateY(-3px)
}

.filter-row .filter-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main)
}

.filter-row .filter-icon {
    width: 24px;
    height: 24px;
    margin-inline-end: 4px;
    display: flex;
    align-items: center
}

.filter-row .filter-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.filter-row .filter-icon i {
    color: var(--text-main)
}

@media (max-width:768px) {
    .filter-row .filter-wrapper {
        padding: 15px 10px
    }

    .filter-row .filter-wrapper h4 {
        font-size: 15px
    }

    .filter-row .filter-btn-text {
        font-size: 12px
    }

    .filter-row .filter-text {
        display: none
    }

    .filter-row .filter-list {
        gap: 5px
    }

    .filter-row .filter-list li {
        width: fit-content;
        flex: 0
    }

    .filter-row .filter-list li .brand-category {
        padding: 10px
    }

    .filter-row .filter-icon {
        margin-inline-end: 0;
        justify-content: center
    }
}

.instructions {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 15px
}

.instructions>div {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px var(--shadow-color)
}

.order .order-nav {
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.order .order-nav-item {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--secondary-color), rgba(0, 0, 0, 0));
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 30px var(--shadow-color);
    cursor: pointer;
    outline: 0
}

.order .order-nav-item i {
    font-size: 20px;
    color: var(--main-color)
}

.order .order-nav-item.active {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--main-opacity), 0 12px 40px var(--shadow-color)
}

.order .order-nav-item::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent, var(--secondary-color), transparent);
    opacity: .5;
    pointer-events: none
}

.order .order-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px
}

.order .order-content #dripfeed-options,
.order .order-content #fields,
.order .order-content .row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px
}

.order .order-content .row .input-group-btn {
    margin-top: 0 !important
}

.order .order-content .row .input-group-btn>button {
    width: 100%;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-main);
    transition: .2s ease;
    margin-inline-start: 3px;
    cursor: pointer;
    height: 45px
}

.order .order-content .row .input-group-btn>button.clear-datetime span {
    color: #ff4d4f !important
}

.order .order-content .form-group__checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .02);
    transition: .25s ease;
    margin-bottom: 10px
}

.order .order-content .form-group__checkbox:hover {
    border-color: var(--main-color);
    background: var(--secondary-color)
}

.order .order-content .form-group__checkbox-label {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer
}

.order .order-content .form-group__checkbox-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2
}

.order .order-content .form-group__checkbox-label .checkmark {
    width: 22px;
    height: 22px;
    display: inline-block;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .03);
    transition: .25s ease;
    box-shadow: 0 8px 18px var(--shadow-color);
    position: relative
}

.order .order-content .form-group__checkbox-label .checkmark::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 12px;
    border-right: 3px solid var(--text-main);
    border-bottom: 3px solid var(--text-main);
    transform: rotate(45deg);
    top: 2px;
    left: 7px;
    opacity: 0;
    transition: .25s ease
}

.order .order-content .form-group__checkbox-label input:checked+.checkmark {
    background: var(--bg-color);
    border-color: var(--bg-color);
    box-shadow: 0 0 0 4px var(--main-opacity)
}

.order .order-content .form-group__checkbox-label input:checked+.checkmark::after {
    opacity: 1
}

.order .order-content .form-group__label-title {
    cursor: pointer;
    font-weight: 900;
    font-size: 14px;
    color: var(--text-main);
    user-select: none;
    margin: 0
}

.order .order-content .form-group__checkbox-label input:disabled+.checkmark {
    opacity: .5;
    cursor: not-allowed
}

.form-control,
.form-control:disabled,
.form-control[readonly],
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--open .select2-dropdown--below {
    background-color: var(--bg-body);
    border-color: var(--bg-body);
    color: var(--text-color);
    text-align: start
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-results__option {
    unicode-bidi: plaintext;
    text-align: start
}

.rtl-form,
.rtl-content {
    direction: rtl;
    text-align: right
}

/* Category and service values are Arabic data even when the interface is LTR. */
#orderform-category + .select2-container[dir="rtl"],
#orderform-service + .select2-container[dir="rtl"] {
    direction: rtl;
    text-align: right
}

#orderform-category + .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
#orderform-service + .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 12px;
    padding-left: 38px;
    text-align: right;
    direction: rtl;
    unicode-bidi: isolate
}

#orderform-category + .select2-container .select2-selection__text,
#orderform-service + .select2-container .select2-selection__text {
    direction: rtl;
    unicode-bidi: isolate
}

#orderform-category + .select2-container .select2-selection__id,
#orderform-service + .select2-container .select2-selection__id {
    direction: ltr;
    unicode-bidi: isolate
}

#orderform-category + .select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow,
#orderform-service + .select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 12px
}

.select2-container[dir="rtl"] .select2-selection__icon {
    margin-right: 0;
    margin-left: 6px
}

.select2-dropdown[dir="rtl"] {
    direction: rtl
}

.select2-dropdown[dir="rtl"] .select2-results__option,
.select2-dropdown[dir="rtl"] .select2-results__message {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext
}

.select2-dropdown[dir="rtl"] .select2-search__field {
    direction: rtl;
    text-align: right
}

/* Keep the LTR Select2 layout while isolating Arabic category/service data. */
#orderform-category + .select2-container[dir="ltr"] .select2-selection__rendered,
#orderform-service + .select2-container[dir="ltr"] .select2-selection__rendered {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    padding-right: 38px;
    padding-left: 12px
}

#orderform-category + .select2-container[dir="ltr"] .select2-selection__icon,
#orderform-service + .select2-container[dir="ltr"] .select2-selection__icon {
    margin-left: 0;
    margin-right: 6px
}

#orderform-category + .select2-container[dir="ltr"] .select2-selection__arrow,
#orderform-service + .select2-container[dir="ltr"] .select2-selection__arrow {
    left: auto;
    right: 12px
}

.select2-dropdown[dir="ltr"] .select2-results__option,
.select2-dropdown[dir="ltr"] .select2-results__message,
.select2-dropdown[dir="ltr"] .select2-search__field {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate
}

.select2-dropdown[dir="ltr"] .select2-selection__text {
    direction: rtl;
    unicode-bidi: isolate
}

.instructions .form-label,
.instructions label {
    display: flex;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-main)
}

.instructions label span {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-inline-start: 6px
}

.instructions .form-control,
.instructions .form-select {
    height: 45px
}

.instructions #service_description>div {
    height: auto !important
}

.instructions .form-control,
.instructions .form-select,
.instructions textarea {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-main);
    transition: .2s ease
}

#new-order-search,
#new-order-search .input-wrapper {
    position: relative
}

#new-order-search .new-order-search-button {
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    padding: 0 2px;
    background: none;
    border: none;
    color: var(--text-main);
    z-index: 2
}

#new-order-search #template-input {
    padding-inline-start: 38px
}

.instructions .fields .help-block {
    margin-top: 3px;
    font-size: 12px
}

.instructions textarea {
    resize: none;
    line-height: 1.8;
    min-height: 120px
}

.instructions .form-control:focus,
.instructions .form-select:focus,
.instructions textarea:focus {
    outline: 0;
    border-color: var(--border-color);
    box-shadow: 0 0 0 1px var(--shadow-color)
}

.instructions input:disabled,
.instructions textarea[readonly] {
    background: var(--secondary-color);
    opacity: .8
}

.instructions .input-group {
    display: flex;
    align-items: center
}

.instructions .input-group-text {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-inline-end: 0;
    border-end-start-radius: 14px;
    border-start-start-radius: 14px;
    padding: 0 14px;
    color: #777;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.instructions .input-group .search {
    border-start-end-radius: 14px;
    border-end-end-radius: 14px;
    width: 100%;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-main);
    transition: .2s ease;
    height: 40px
}

.instructions .form-group span.fas {
    display: block;
    font-size: 15px;
    color: #777;
    margin-top: 4px
}

.instructions .main-btn {
    background: var(--main-color);
    color: var(--text-main);
    font-weight: 800;
    font-size: 14px;
    padding: 10px 32px;
    border-radius: 14px;
    cursor: pointer;
    transition: .25s ease;
    margin-top: 10px;
    border: 0;
    transition: all .2s ease-in-out
}

.instructions .main-btn:hover {
    opacity: .9
}

.instructions .order-info {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 12px 35px var(--shadow-color);
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-main)
}

.instructions .order-info h5 {
    font-size: 15px;
    font-weight: 900;
    margin: 8px 0 12px
}

.instructions .order-info-list {
    margin: 0;
    padding: 0;
    padding-inline-start: 24px;
    text-align: start;
    line-height: 1.9
}

.instructions .order-info p {
    margin: 0;
    padding-inline-start: 14px;
    position: relative;
    color: var(--text-main)
}

.instructions .order-info p::before {
    content: none;
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--main-color);
    font-weight: 700
}

.instructions .order-info p:has(â™»),
.instructions .order-info p:has(â›”),
.instructions .order-info p:has(💧),
.instructions .order-info p:has(🔥) {
    padding-inline-start: 0
}

.instructions .order-info p:has(â™»)::before,
.instructions .order-info p:has(â›”)::before,
.instructions .order-info p:has(💧)::before,
.instructions .order-info p:has(🔥)::before {
    display: none
}

.instructions .order-info .brief-link {
    color: var(--main-color);
    font-weight: 800;
    text-decoration: none
}

.instructions .order-info .brief-link:hover {
    text-decoration: underline
}

.instructions .order-info::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, var(--main-opacity), transparent 40%);
    opacity: .4
}

@media (max-width:768px) {
    .instructions {
        flex-direction: column;
        margin-top: 10px;
        gap: 10px
    }

    .instructions>div {
        flex: 0;
        width: 100%;
        padding: 15px
    }

    .instructions .order-info {
        padding: 20px;
        font-size: 13px
    }

    .order .order-nav {
        margin-bottom: 15px
    }

    .order .order-nav-item {
        font-size: 12px;
        padding: 10px 15px
    }

    .order .order-nav-item i {
        font-size: 17px;
        display: none
    }
}

.alert-parent {
    padding-top: 20px;
    width: 100%;
    overflow: hidden
}

.break-link {
    word-break: break-all;
    overflow-wrap: anywhere
}

.massorder {
    width: 100%
}

.massorder .page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px
}

.massorder .mode-switch {
    display: flex;
    gap: 12px;
    margin-bottom: 20px
}

.massorder .mode-item {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 8px 20px;
    cursor: pointer;
    background: var(--secondary-color);
    box-shadow: 0 5px 15px var(--shadow-color)
}

.massorder .mode-item input {
    display: none
}

.massorder .mode-item span {
    font-weight: 700
}

.mode-item input:checked+span {
    color: var(--main-color)
}

.massorder .massorder-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px var(--shadow-color)
}

.massorder label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px
}

.massorder .form-control {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px
}

.massorder .form-control:focus {
    outline: 0;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--main-opacity)
}

.massorder textarea {
    resize: none
}

.massorder .help-text {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #666
}

.massorder .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-weight: 700
}

.massorder .submit-btn {
    margin-top: 24px;
    width: 100%;
    background: var(--main-color);
    color: var(--text-main);
    border: none;
    padding: 12px;
    border-radius: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: .3s
}

.massorder .submit-btn:hover {
    opacity: .9
}

.massorder .mt {
    margin-top: 10px
}

@media (max-width:768px) {
    .massorder .massorder-card {
        padding: 15px
    }
}

.orders {
    align-items: start !important
}

.orders .search {
    width: 500px;
    margin-bottom: 16px
}

.orders .search>div {
    display: flex;
    align-items: center;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px var(--shadow-color)
}

.orders .search>div .form-control {
    border: none;
    background: 0 0;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-main);
    width: 100%
}

.orders .search>div .form-control::placeholder {
    color: #888
}

.orders .search>div .form-control:focus {
    outline: 0;
    box-shadow: none
}

.orders .search>div .input-group-btn button {
    background: var(--secondary-color);
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all .2s ease
}

.orders .search>div .input-group-btn button:hover {
    opacity: .9
}

.orders .nav.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px
}

.orders .nav.nav-pills li {
    list-style: none
}

.orders .nav.nav-pills li a {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 8px;
    padding: 10px 18px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    transition: all .25s ease
}

.orders .nav.nav-pills li a:hover {
    background: var(--main-opacity);
    border-color: var(--main-color)
}

.orders .nav.nav-pills li.active a {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
    box-shadow: 0 6px 20px var(--shadow-color)
}

.orders .pills-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7
}

.orders .nav.nav-pills li.active .pills-icon {
    opacity: 1
}

@media (max-width:550px) {
    .orders .search {
        width: 100%
    }

    .orders .nav.nav-pills li a {
        font-size: 11px
    }
}

.orders .table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px
}

.orders .table-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px;
    font-size: 13px;
    color: var(--text-main)
}

.orders .table-wrapper thead th {
    background: var(--secondary-color);
    padding: 0;
    white-space: nowrap;
    font-weight: 800;
    border-inline-end: 1px dashed var(--border-color)
}

.orders .table-wrapper tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    color: var(--text-main);
    background: var(--secondary-color);
    border-inline-end: 1px dashed var(--border-color)
}

.orders .table-wrapper tbody td:first-child,
.orders .table-wrapper thead th:first-child {
    border-radius: 0 10px 10px 0
}

.orders .table-wrapper tbody td:last-child,
.orders .table-wrapper thead th:last-child {
    border-radius: 10px 0 0 10px;
    border-inline-end: none
}

.orders .table-wrapper .th-head {
    padding: 14px 12px;
    text-align: start
}

.orders .table-wrapper .th-head-content {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--text-main)
}

.orders .table-wrapper tbody tr {
    transition: background .2s ease
}

.orders .table-wrapper tbody tr:hover {
    background: var(--secondary-color)
}

.orders .table-wrapper tbody tr:last-child td {
    border-bottom: none
}

.orders .table-wrapper .td-id-copy-wrapper {
    display: flex;
    align-items: center;
    gap: 8px
}

.orders .table-wrapper .td-id-copy-wrapper .id-r {
    display: flex;
    align-items: center;
    gap: 6px
}

.orders .table-wrapper .btn-copy {
    background: var(--main-color);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-main);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity .2s ease;
    line-height: 0
}

.orders .table-wrapper .btn-search {
    background: var(--main-color);
    font-size: 12px;
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 8px;
    border: none
}

.orders .table-wrapper .btn-search:hover {
    opacity: .9;
    text-decoration: underline
}

.orders .table-wrapper .btn-copy:hover {
    opacity: .9
}

.orders .table-wrapper .custom-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    cursor: pointer;
    position: relative
}

.orders .table-wrapper .order-checkbox,
.orders .table-wrapper .select-all-checkbox {
    display: none
}

.orders .table-wrapper .order-checkbox:checked+.custom-checkbox,
.orders .table-wrapper .select-all-checkbox:checked+.custom-checkbox {
    background: var(--main-color);
    border-color: var(--main-color)
}

.orders .table-wrapper .order-checkbox:checked+.custom-checkbox::after,
.select-all-checkbox:checked+.custom-checkbox::after {
    content: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-main)
}

.orders .table-wrapper .btn-link {
    color: var(--main-color);
    font-weight: 700;
    text-decoration: none;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: clip;
    direction: ltr
}

.orders .table-wrapper .btn-link:hover {
    text-decoration: underline
}

.orders .table-wrapper .service-name p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-main);
    min-width: 250px;
    max-width: 400px
}

.orders .table-wrapper .service-name strong {
    color: var(--main-color)
}

.orders .status-badge {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: var(--main-color);
    color: var(--text-main)
}

.orders .status-badge i {
    font-size: 16px;
    margin-inline-end: 10px
}

.orders .table-wrapper .badge-complete {
    background: rgba(34, 197, 94, .15);
    color: #22c55e
}

.orders .table-wrapper .badge-pending {
    background: rgba(245, 158, 11, .15);
    color: #f59e0b
}

.orders .table-wrapper .badge-processing {
    background: rgba(59, 130, 246, .15);
    color: #3b82f6
}

.orders .table-wrapper .badge-partial {
    background: rgba(168, 85, 247, .15);
    color: #a855f7
}

.orders .table-wrapper .badge-canceled {
    background: rgba(239, 68, 68, .15);
    color: #ef4444
}

.orders .table-wrapper .btn.copied {
    background: #22c55e !important
}

.orders .table-wrapper .copy-selected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .25s ease;
    opacity: 0;
    pointer-events: none
}

.orders .table-wrapper .copy-selected:not(:disabled) {
    opacity: 1;
    pointer-events: auto
}

.orders .table-wrapper .copy-selected:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    box-shadow: 0 6px 20px var(--shadow-color)
}

.orders .table-wrapper .copy-selected:disabled {
    opacity: .2;
    pointer-events: none
}

.orders .table-wrapper .copy-selected i {
    font-size: 14px
}

.orders .table-wrapper .order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center
}

.orders .table-wrapper .order-actions .btn {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1;
    transition: .25s ease;
    border: none
}

.orders .table-wrapper .order-actions .btn-primary {
    background: var(--main-color);
    color: var(--text-main)
}

.orders .table-wrapper .order-actions .btn-primary:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.orders .table-wrapper .order-actions .btn-default {
    background: var(--secondary-color);
    color: var(--text-main)
}

.orders .table-wrapper .order-actions .btn.disabled,
.orders .table-wrapper .order-actions .btn[disabled] {
    background: #f1f1f1;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    transform: none
}

.orders .table-wrapper .order-actions {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color)
}

.orders .table-wrapper .order-actions:has(:not(a)) {
    color: #0d6efd
}

.orders .table-wrapper .order-actions span,
.orders .table-wrapper .order-actions strong {
    color: #ff9800
}

.orders .table-wrapper .order-actions [data-toggle=tooltip] {
    cursor: help
}

@media (max-width:768px) {
    .orders table {
        display: flex;
        flex-direction: column;
        overflow: hidden
    }

    .orders .table-wrapper {
        background: 0 0 !important;
        border: none !important;
        box-shadow: none !important
    }

    .orders .table-wrapper thead tr {
        width: 100%;
        display: block;
        border-radius: 20px
    }

    .orders .table-wrapper thead tr th:first-child {
        display: block;
        margin-bottom: 10px;
        border: none;
        border-radius: 15px
    }

    .orders .table-wrapper thead tr th {
        display: none
    }

    .orders .table-wrapper tbody {
        display: flex;
        flex-direction: column;
        gap: 16px
    }

    .orders .table-wrapper tbody tr {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--secondary-color);
        border-radius: 20px;
        padding: 16px
    }

    .orders .table-wrapper tbody td {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 10px 14px;
        background: var(--td-color);
        border-radius: 12px !important;
        border: none;
        font-size: 13px;
        overflow: hidden
    }

    .orders .table-wrapper tbody td::before {
        content: attr(data-head);
        font-weight: 800;
        color: var(--place-color);
        margin-inline-end: 12px;
        white-space: nowrap;
        min-width: 60px
    }

    .orders .table-wrapper .td-id-copy-wrapper {
        justify-content: start;
        width: 100%
    }

    .orders .table-wrapper .service-name p {
        font-size: 12px;
        line-height: 1.7;
        min-width: auto;
        max-width: 100%
    }

    .orders .table-wrapper .status-badge {
        font-size: 13px
    }

    .orders .table-wrapper .order-actions {
        justify-content: flex-start;
        gap: 8px
    }

    .orders .table-wrapper .order-actions .btn {
        font-size: 11px;
        padding: 6px 8px
    }

    .orders .table-wrapper .btn-link {
        max-width: 100%;
        white-space: pre
    }
}

.services .table-wrapper {
    width: 100%
}

.services .table-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--text-main)
}

.services .table-wrapper tbody tr.service-row {
    background: var(--secondary-color);
    border-radius: 16px;
    box-shadow: 0 8px 24px var(--shadow-color);
    transition: transform .2s ease, box-shadow .2s ease
}

.services .table-wrapper tbody tr.service-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px var(--shadow-color)
}

.services .table-wrapper .category-name {
    background: var(--main-color);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 900;
    border-radius: 15px
}

.services .table-wrapper .category-box {
    padding: 14px 20px
}

.services .table-wrapper .category-inner {
    display: flex;
    align-items: center;
    gap: 10px
}

.services .table-wrapper .category-inner i,
.services .table-wrapper .category-inner span {
    font-size: 18px
}

.services .table-wrapper .service-row>td {
    padding: 16px;
    vertical-align: top
}

.services .table-wrapper .service-row>td:first-child {
    border-radius: 0
}

.services .table-wrapper .service-row>td:last-child {
    border-radius: 0
}

.services .table-wrapper .service-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px
}

.services .table-wrapper .service-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main)
}

.services .table-wrapper .btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--main-color);
    color: var(--text-main);
    font-weight: 900;
    cursor: pointer;
    position: relative;
    transition: all .2s ease
}

.services .table-wrapper .btn-copy:hover {
    opacity: .9
}

.services .table-wrapper .btn-copy svg {
    fill: var(--text-main)
}

.services .table-wrapper .btn-copy.copied {
    background: #22c55e !important
}

.services .table-wrapper .td-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 800
}

.services .table-wrapper .actions-item {
    display: flex;
    gap: 8px
}

.services .table-wrapper .btn-order-now {
    background: var(--main-color);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px
}

.services .table-wrapper .btn-fav {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.btn-fav.favorite-active {
    color: var(--main-color)
}

.services .table-wrapper .btn-details {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    color: var(--main-color);
    cursor: pointer
}

.services .table-wrapper .w-100 {
    width: 100px
}

.services .table-wrapper .w-170 {
    width: 170px
}

@media (max-width:768px) {

    .services .table-wrapper table,
    .services .table-wrapper tbody,
    .services .table-wrapper td,
    .services .table-wrapper tr {
        display: block;
        width: 100%
    }

    .services .table-wrapper tr.category-row {
        background: 0 0
    }

    .services .table-wrapper tr.category-row td {
        display: flex !important
    }

    .services .table-wrapper tr {
        margin-bottom: 16px
    }

    .services .table-wrapper td.serv-name {
        padding: 12px 16px;
        border-bottom: 1px dashed var(--border-color);
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between
    }

    .services .table-wrapper td.serv-name:last-child {
        border-bottom: none
    }

    .services .table-wrapper .service-label {
        font-size: 12px;
        padding-inline-end: 20px
    }

    .services .table-wrapper .category-box {
        padding: 10px
    }

    .services .table-wrapper .category-inner {
        font-size: 12px
    }
}

.services-filter {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-bottom: 10px
}

.services-filter .filter-button {
    position: relative
}

.services-filter .filter-button .dropdown-toggle {
    width: 100%;
    background: var(--main-color);
    color: var(--text-main);
    border: none;
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: all .25s ease
}

.services-filter .filter-button .dropdown-toggle:hover {
    transform: translateY(-1px)
}

.services-filter .filter-button .dropdown-toggle i {
    font-size: 18px
}

.services-filter .filter-button.open .dropdown-menu {
    display: block !important
}

.services-filter .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    min-width: 400px;
    max-height: 400px;
    min-height: 400px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 60px var(--shadow-color);
    padding: 8px;
    display: none;
    z-index: 20;
    overflow: auto
}

.services-filter .dropdown.show .dropdown-menu {
    display: block !important;
    animation: dropdownFade .25s ease
}

.services-filter .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-main);
    font-size: 14px;
    transition: background .2s ease
}

.services-filter .dropdown-item:hover {
    background: var(--main-color)
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

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

.services-filter .service-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    box-shadow: 0 20px 60px var(--shadow-color);
    padding: 6px 10px
}

.services-filter .service-search input {
    flex: 1;
    border: none;
    background: 0 0;
    color: var(--text-main);
    font-size: 14px;
    padding: 12px
}

.services-filter .service-search input::placeholder {
    color: var(--text-muted)
}

.services-filter .service-search input:focus {
    outline: 0
}

.services-filter .service-search button {
    background: var(--main-color);
    border: none;
    color: var(--text-main);
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease
}

.services-filter .service-search button:hover {
    transform: scale(1.05)
}

.services-filter .service-search i {
    font-size: 18px
}

@media (max-width:768px) {
    .services-filter {
        flex-direction: column;
        gap: 10px
    }

    .services-filter .filter-button {
        width: 100%
    }

    .services-filter .filter-button .dropdown-toggle {
        justify-content: center
    }

    .services-filter .dropdown-menu {
        min-width: 100%
    }

    .services-filter .dropdown-item {
        font-size: 12px
    }

    .services-filter .service-search {
        height: 40px
    }

    .services-filter .service-search button {
        padding: 5px
    }
}

.services-filter .dropdown.currencies .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 10px 25px var(--shadow-color)
}

.services-filter .dropdown.currencies .dropdown-toggle .currency-icon {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border-color);
    color: var(--main-color);
    font-size: 18px
}

.services-filter .dropdown.currencies .dropdown-toggle .currency-text {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap
}

.services-filter .dropdown.currencies .dropdown-toggle .currency-arrow {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    opacity: .8;
    transition: transform .25s ease
}

.services-filter .dropdown.currencies .dropdown-toggle:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    transform: translateY(-2px)
}

.services-filter .dropdown.currencies .dropdown-toggle:hover .currency-icon {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .25);
    color: #fff
}

.services-filter .dropdown.currencies .dropdown-toggle:hover .currency-arrow {
    transform: rotate(180deg);
    opacity: 1
}

@media (max-width:768px) {
    .services-filter .dropdown.currencies .dropdown-toggle {
        width: 100%;
        justify-content: space-between
    }
}

.alert.alert-danger {
    position: relative;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 14px 16px;
    padding-inline-end: 46px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 16px 40px rgba(255, 77, 79, .35);
    display: flex;
    align-items: start;
    animation: alertFadeIn .35s ease;
    align-items: center
}

.alert.alert-danger::before {
    content: none;
    font-size: 18px;
    margin-inline-end: 10px
}

.alert.alert-danger .close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 14px;
    opacity: .9;
    font-size: 22px;
    text-shadow: none;
    background: 0 0;
    border: none;
    color: #fff;
    outline: 0;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease
}

.alert.alert-danger .close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1)
}

.alert.alert-success {
    position: relative;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 14px 16px;
    padding-inline-end: 46px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 16px 40px rgba(34, 197, 94, .35);
    display: flex;
    align-items: start;
    animation: alertFadeIn .35s ease;
    align-items: center
}

.alert.alert-success::before {
    content: none;
    font-size: 18px;
    margin-inline-end: 10px
}

/* New-order confirmation: keep translated order data stacked and encoding-safe. */
.new-order .neworder-success {
    display: block;
    text-align: start
}

.new-order .neworder-success::before {
    content: none;
    display: none
}

.new-order .neworder-success .alert-content {
    display: block
}

.new-order .neworder-success h4 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
    color: inherit
}

.new-order .neworder-success-details {
    display: grid;
    gap: 3px;
    min-width: 0
}

.new-order .neworder-success-details>div {
    min-width: 0;
    overflow-wrap: anywhere
}

.alert.alert-success .close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 14px;
    opacity: .9;
    font-size: 22px;
    text-shadow: none;
    background: 0 0;
    border: none;
    color: #fff;
    outline: 0;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease
}

.alert.alert-success .close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1)
}

.alert .alert-content {
    display: flex;
    align-items: start;
    gap: 2px;
    flex: 1;
    flex-direction: column
}

@keyframes alertFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

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

@media (max-width:576px) {
    .alert.alert-danger {
        font-size: 13px;
        padding: 12px 42px 12px 14px
    }

    .alert.alert-success {
        font-size: 13px;
        padding: 12px 42px 12px 14px
    }
}

.addfunds {
    padding: 0
}

.addfunds .method {
    width: 100%
}

.addfunds .card {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 30px var(--shadow-color);
    width: 100%
}

.addfunds form {
    display: flex;
    flex-direction: column
}

.addfunds form>div {
    margin-bottom: 10px
}

.addfunds .section .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.addfunds .section .title {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: .06em;
    margin: 0
}

.addfunds .hidden {
    display: none !important
}

.addfunds .methods {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px
}

.addfunds .methods .method-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: fit-content;
    height: 60px;
    padding: 10px;
    padding-inline-end: 35px;
    border-radius: 10px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    transition: .25s ease;
    user-select: none
}

.addfunds .methods .method-card:hover {
    border-color: var(--main-color);
    transform: translateY(-1px)
}

.addfunds .methods .method-card.active {
    border-color: var(--main-color)
}

.addfunds .methods .method-left {
    display: flex;
    align-items: center;
    gap: 10px
}

.addfunds .methods .method-icon {
    width: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 10px 4px
}

.addfunds .methods .method-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.addfunds .methods .method-title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3
}

.addfunds .methods .method-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 10px;
    top: 10px
}

.addfunds .methods .method-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.85);
    transition: .25s ease
}

.addfunds .methods .method-card.active .method-check {
    opacity: 1;
    transform: scale(1);
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--text-main)
}

.addfunds .methods .method-check::before {
    content: none;
    font-size: 12px;
    font-weight: 900
}

.addfunds .bonus {
    display: none
}

.addfunds .bonus.show {
    display: block
}

.addfunds .bonus-header {
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    background: var(--secondary-color);
    box-shadow: 0 8px 25px var(--shadow-color);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.addfunds .bonus-header-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px
}

.addfunds .bonus-header-title::before {
    content: "🎁";
    font-size: 20px
}

.addfunds .bonus-toggle {
    background: var(--main-color);
    color: var(--text-main);
    padding: 6px 14px;
    border-radius: 8px;
    opacity: .95;
    font-size: 13px;
    cursor: pointer;
    transition: .3s
}

.addfunds .bonus-toggle:hover {
    opacity: 1
}

.addfunds .bonus-card {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    margin-top: 15px
}

.addfunds .bonus-card.show {
    display: grid !important
}

.addfunds .bonus-tier {
    background: var(--secondary-color);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px var(--shadow-color);
    border: 1px solid var(--border-color);
    transition: .25s ease
}

.addfunds .bonus-tier:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    border-color: var(--main-color)
}

.addfunds .bonus-tier-amount {
    font-weight: 700;
    color: var(--main-color);
    font-size: 16px
}

.addfunds .bonus-tier-pct {
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    border-right: 1px solid var(--border-color);
    padding-right: 10px
}

.addfunds .method-select {
    display: none !important
}

.addfunds .btn-pay {
    width: 100%;
    height: 45px;
    border-radius: 14px;
    border: none;
    margin-top: 15px;
    cursor: pointer;
    background: var(--main-color);
    color: var(--text-main);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 14px 30px var(--shadow-color);
    transition: .25s ease
}

.addfunds .btn-pay:hover {
    transform: translateY(-2px)
}

.addfunds .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.addfunds .form-group .control-label,
.addfunds .form-group>label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    display: inline;
    margin-bottom: 3px
}

.addfunds .form-group .form-control {
    width: 100%;
    height: 45px;
    border-radius: 14px;
    padding: 0 16px;
    color: var(--text-main);
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    outline: 0;
    appearance: none;
    transition: .25s ease
}

.addfunds .form-group .form-control:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 4px var(--main-opacity)
}

.addfunds .grid-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.addfunds .quick-btn {
    position: relative;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    transition: .25s ease
}

.addfunds .quick-btn:hover {
    border-color: var(--main-color);
    transform: translateY(-2px)
}

.addfunds .quick-btn.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--text-main);
    box-shadow: 0 12px 22px var(--main-opacity);
    padding-left: 30px
}

.addfunds .quick-btn .quick-clear {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    color: var(--text-main);
    font-weight: 900;
    font-size: 12px
}

.addfunds .quick-btn.active .quick-clear {
    display: inline-flex
}

.addfunds .calc_bonus>div {
    background: 0 0;
    color: var(--main-color);
    padding: 5px;
    font-size: 12px;
    border-radius: 10px;
    border: 1px solid var(--main-color)
}

.addfunds h4 {
    font-size: 14px;
    margin: 10px 0
}

.addfunds .deposit-steps {
    text-align: right;
    border: 2px solid var(--border-color);
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main)
}

.addfunds .alert {
    margin-top: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    font-size: 13px
}

.addfunds .alert span {
    padding-inline-start: 5px
}

.addfunds .alert-warning {
    background-color: #f97316;
    color: #fff
}

.addfunds .wallet {
    font-size: 14px;
    padding: 10px;
    background: var(--secondary-color);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 10px
}

.addfunds form img {
    max-height: 200px;
    max-width: 1000px
}

@media (max-width:576px) {
    .addfunds .methods .method-card {
        padding-inline-end: 0;
        width: 100%;
        flex: 1 1 calc(50% - 15px)
    }

    .addfunds .methods .method-left {
        gap: 3px
    }

    .addfunds .methods .method-title {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        display: block;
        width: 100%
    }
}

.addfunds .lists {
    margin-top: 30px
}

html.dark .addfunds .lists table thead {
    background: linear-gradient(135deg, var(--nv-v2) 0%, var(--nv-v) 100%)
}

html.dark .addfunds .lists table thead th {
    background: transparent !important;
    color: #f8f7ff;
    border-bottom-color: transparent
}

.addfunds .lists .invoice a {
    background: var(--main-color);
    color: var(--text-main);
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    white-space: nowrap;
    transition: .3s
}

.addfunds .lists .invoice:hover a {
    text-decoration: underline
}

.addfunds .lists .amount {
    font-weight: 700;
    color: var(--main-color)
}

.addfunds .toggle-methods {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 10px;
    font-size: 14px;
    border: none;
    background: var(--main-color);
    color: var(--text-main);
    font-weight: 700;
    cursor: pointer;
    display: none
}

.addfunds .instruction {
    position: relative;
    overflow: hidden
}

.addfunds .instruction img {
    width: 100%;
    object-fit: cover
}

@media (max-width:768px) {
    .methods.collapsed .method-card:nth-child(n+5) {
        display: none
    }

    .toggle-methods {
        display: block !important
    }
}

.api {
    padding: 30px 15px;
    display: flex;
    justify-content: center;
    direction: ltr
}

.api .card {
    width: 100%;
    max-width: 900px;
    background: var(--bg-color);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px var(--shadow-color);
    border: 1px solid var(--border-color)
}

.api .card a {
    color: var(--main-color);
    font-weight: 600;
    text-decoration: none
}

.api .card a:hover {
    text-decoration: underline
}

.api .title {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 24px;
    color: var(--text-main)
}

.api .method-title {
    margin: 28px 0 12px;
    font-size: 18px;
    font-weight: 800;
    color: var(--main-color)
}

.api table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px
}

.api table thead {
    background: var(--main-color);
    color: var(--text-main)
}

.api table td,
.api table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-main)
}

.api table th {
    font-weight: 700;
    text-align: left;
    background: var(--secondary-color)
}

.api table td {
    background: var(--bg-color)
}

.api table tbody tr:hover {
    background: var(--main-opacity)
}

.api .select-wrapper {
    margin: 10px 0 20px
}

.api .select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-size: 14px
}

.api .select:focus {
    outline: 0;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--main-opacity)
}

.api .example {
    margin-top: 12px
}

.api .example strong {
    color: var(--text-main)
}

.api .example pre {
    background: #0f172a;
    color: #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    font-size: 13px;
    overflow-x: auto;
    margin-top: 8px
}

.api .button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    border-radius: 14px;
    background: var(--main-color);
    color: var(--text-main) !important;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease
}

.api .button:hover {
    opacity: .9;
    transform: translateY(-1px)
}

@media (max-width:576px) {
    .api .card {
        padding: 16px
    }

    .api .title {
        font-size: 20px
    }

    .api .method-title {
        font-size: 16px
    }
}

.tickets {
    padding: 0;
    align-items: start !important
}

.tickets .card {
    background: var(--bg-color);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px var(--shadow-color);
    width: 100%
}

.tickets .card .fields,
.tickets .card form {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.tickets .card .form-group {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.tickets .card .form-group label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    display: block
}

.tickets .card form input,
.tickets .card form select,
.tickets .card form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    font-size: 14px;
    color: var(--text-main)
}

.tickets .card form textarea {
    resize: none
}

.tickets .card form input:focus,
.tickets .card form select:focus,
.tickets .card form textarea:focus {
    outline: 0;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--main-opacity)
}

.tickets .card form button[type=submit] {
    margin-top: 10px;
    padding: 14px;
    border-radius: 16px;
    border: none;
    background: var(--main-color);
    color: var(--text-main);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease
}

.tickets .card form button[type=submit]:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.tickets .card .tickets-alert {
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

.tickets .card .tickets-alert.danger {
    background: #fee2e2;
    color: #b91c1c
}

.tickets .card .tickets-alert-close {
    background: 0 0;
    border: none;
    font-size: 20px;
    cursor: pointer
}

.tickets .card .uploader-wrapper {
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 8px 20px;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease;
    display: flex;
    align-items: center
}

.tickets .card .uploader-wrapper button {
    color: var(--text-main);
    cursor: pointer
}

.tickets .card .uploader-wrapper:hover {
    border-color: var(--main-color)
}

.tickets .search {
    width: 500px;
    margin-bottom: 16px
}

.tickets .search>div {
    display: flex;
    align-items: center;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px var(--shadow-color)
}

.tickets .search>div .form-control {
    border: none;
    background: 0 0;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-main)
}

.tickets .search>div .form-control::placeholder {
    color: #888
}

.tickets .search>div .form-control:focus {
    outline: 0;
    box-shadow: none
}

.tickets .search>div .input-group-btn button {
    background: var(--secondary-color);
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    transition: all .2s ease
}

.tickets .search>div .input-group-btn button:hover {
    opacity: .9
}

.tickets table {
    width: 100%;
    border-collapse: collapse
}

.tickets table thead {
    background: var(--main-color);
    color: var(--text-main)
}

.tickets table td,
.tickets table th {
    padding: 12px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color)
}

.tickets table tbody tr:hover {
    background: var(--main-opacity)
}

.tickets table a {
    color: var(--text-main);
    font-weight: 600;
    text-decoration: underline;
    transition: .3s ease-in-out
}

.tickets table a:hover {
    color: var(--main-color)
}

.tickets table .status {
    font-weight: 700
}

.tickets .ticket-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700
}

.tickets .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

.tickets .step-item {
    padding: 15px;
    border-radius: 16px;
    background: var(--card-bg);
    box-shadow: 0 0 0 1px var(--shadow-color);
    transition: .3s ease
}

.tickets .step-item:hover {
    transform: translateY(-5px)
}

.tickets .step-highlight {
    background: var(--main-color);
    color: var(--text-main)
}

.tickets .step-badge {
    background: var(--bg-color);
    color: var(--text-main);
    border-radius: 12px;
    padding: 8px 10px;
    text-align: center;
    width: 60px
}

.tickets .step-label {
    display: block;
    font-size: 10px;
    opacity: .8
}

.tickets .step-number {
    display: block;
    font-size: 16px;
    font-weight: 700
}

.tickets .step-title {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700
}

.tickets .step-desc {
    margin-top: 5px;
    font-size: 12px;
    opacity: .85
}

@media (max-width:992px) {
    .tickets .steps-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px
    }

    .tickets .step-item {
        flex: 0 0 100%;
        scroll-snap-align: start
    }

    .tickets .steps-grid::-webkit-scrollbar {
        height: 6px
    }

    .tickets .steps-grid::-webkit-scrollbar-track {
        background: 0 0
    }

    .tickets .steps-grid::-webkit-scrollbar-thumb {
        background: #444;
        border-radius: 10px
    }
}

@media (max-width:576px) {
    .tickets .card {
        padding: 16px
    }

    .tickets .table {
        font-size: 13px
    }

    .tickets .search {
        width: 100%
    }
}

.ticketview {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    background: var(--bg-color);
    border-radius: 22px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px var(--shadow-color)
}

.ticketview .card {
    width: 100%
}

.ticketview .header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color)
}

.ticketview .header .title {
    font-size: 20px;
    font-weight: 800;
    margin: 0
}

.ticketview .chat {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 20px;
    max-height: 500px;
    overflow: auto;
    scroll-behavior: smooth
}

.ticketview .chat .message {
    max-width: 70%;
    display: flex;
    flex-direction: column
}

.ticketview .chat .message.user {
    align-self: flex-end;
    text-align: right
}

.ticketview .chat .message.support {
    align-self: flex-start
}

.ticketview .chat .bubble {
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 10px 30px var(--shadow-color)
}

.ticketview .chat .message.user .bubble {
    background: var(--main-color);
    color: var(--text-main);
    border-bottom-right-radius: 6px
}

.ticketview .chat .message.support .bubble {
    background: var(--secondary-color);
    color: var(--text-main);
    border-bottom-left-radius: 6px
}

.ticketview .chat .files {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.ticketview .chat .files a {
    font-size: 13px;
    color: inherit;
    opacity: .85;
    text-decoration: underline
}

.ticketview .chat .meta {
    font-size: 11px;
    opacity: .7;
    margin-top: 6px
}

.ticketview .chat .message.user .meta {
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.ticketview .reply {
    border-top: 1px solid var(--border-color);
    padding-top: 20px
}

.ticketview .reply label {
    font-weight: 700;
    margin-bottom: 6px;
    display: block
}

.ticketview .reply textarea {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-size: 14px;
    resize: vertical;
    margin-bottom: 14px
}

.ticketview .reply textarea:focus {
    outline: 0;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--main-opacity)
}

.ticketview .reply button[type=submit] {
    margin-top: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    border: none;
    background: var(--main-color);
    color: var(--text-main);
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease
}

.ticketview .reply button[type=submit]:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.ticketview .ticket-alert {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 12px
}

.ticketview .ticket-alert.danger {
    background: #fee2e2;
    color: #b91c1c
}

.ticketview .card .uploader-wrapper {
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 8px 20px;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease;
    display: flex;
    align-items: center;
    color: var(--text-main);
    margin-bottom: 14px
}

.ticketview .card .uploader-wrapper:hover {
    border-color: var(--main-color)
}

.ticketview .card .uploader-wrapper button {
    color: var(--text-main);
    cursor: pointer
}

@media (max-width:576px) {
    .ticketview .chat .message {
        max-width: 100%
    }
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px)
}

.modal-box {
    position: relative;
    width: min(420px, 92%);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    margin: 100px auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
    padding: 18px;
    animation: modalPop .25s ease
}

@keyframes modalPop {
    from {
        transform: translateY(20px);
        opacity: 0
    }

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px
}

.modal-header h3 {
    font-size: 18px;
    color: var(--text-main)
}

.modal-close {
    background: 0 0;
    border: none;
    color: var(--text-main);
    font-size: 28px;
    cursor: pointer
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    padding-left: 6px
}

.modal-link {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: .2s
}

.modal-link.active,
.modal-link:hover {
    border-color: var(--main-color)
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    margin: 20px 0 0;
    list-style: none
}

.pagination li {
    display: inline-flex
}

.pagination li a {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 6px 20px var(--shadow-color)
}

.pagination li a:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    transform: translateY(-2px)
}

.pagination li.active a {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    box-shadow: 0 10px 25px var(--shadow-color);
    transform: translateY(-2px)
}

.pagination li a span {
    font-size: 18px;
    line-height: 1
}

.pagination li a {
    user-select: none
}

.rtl-pagination {
    direction: rtl
}

@media (max-width:768px) {
    .pagination {
        gap: 6px;
        flex-wrap: wrap
    }

    .pagination li a {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
        border-radius: 10px
    }
}

.input-error {
    border: 1px solid #ff4d4f !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, .15) !important;
    animation: shake .25s ease
}

@keyframes shake {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    50% {
        transform: translateX(4px)
    }

    75% {
        transform: translateX(-3px)
    }

    100% {
        transform: translateX(0)
    }
}

#particles {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--bg-color)
}

.blog-gust {
    padding-top: 15px !important
}

.blog {
    padding: 0
}

.blog .intro {
    padding-top: 0;
    margin-bottom: 15px
}

.blog .intro>div {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 25px;
    color: var(--text-light);
    box-shadow: 0 15px 35px var(--shadow-color)
}

.blog .lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 25px;
    padding: 0
}

.blog .post {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 15px 35px var(--shadow-color);
    transition: .3s ease
}

.blog .post:hover {
    transform: translateY(-1px);
    border-color: var(--main-color)
}

.blog .title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 5px
}

.blog .image img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
    max-height: 300px
}

.blog .lists .content {
    color: #9aa4b2 !important;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 !important
}

.blog .info {
    padding: 20px
}

.blog .lists .content h1,
.blog .lists .content h2,
.blog .lists .content h3,
.blog .lists .content h4,
.blog .lists .content h5,
.blog .lists .content h6 {
    font-size: 14px !important;
    font-weight: 700 !important
}

.blog .lists .content font,
.blog .lists .content p {
    font-size: 12px !important
}

.blog .content {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.9
}

.blog .actions {
    margin-top: 0
}

.blog .actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 800;
    background: var(--main-color);
    color: var(--text-main);
    box-shadow: 0 8px 18px var(--main-opacity);
    transition: .25s
}

.blog .actions .btn {
    transform: translateY(-3px);
    background: var(--main-color)
}

@media (max-width:768px) {
    .blog .lists {
        grid-template-columns: 1fr
    }

    .blog .intro,
    .blog .post {
        border-radius: 16px
    }

    .blog .title {
        font-size: 16px
    }

    .blog .info {
        padding: 10px
    }

    .blog .actions .btn,
    .blog .actions .btn i {
        font-size: 13px
    }
}

.post {
    padding-bottom: 80px;
    background: var(--bg-color)
}

.post .container {
    padding: 0 20px
}

.post .hero-image {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color)
}

.post .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.post .hero-image .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75))
}

.post .hero-image .title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    z-index: 2
}

.post .hero-image .title h1 {
    color: var(--text-main);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.6;
    text-shadow: 0 8px 25px var(--shadow-color)
}

.post .card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 35px;
    margin-top: 30px;
    position: relative;
    z-index: 3
}

.post .card .title {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.6;
    text-align: center
}

.post .content {
    font-size: 16px;
    line-height: 2;
    padding: 0 !important
}

.post .actions {
    margin-top: 28px;
    display: flex;
    justify-content: start
}

.post .actions .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--main-color);
    color: var(--text-main);
    box-shadow: 0 10px 20px var(--main-opacity);
    transition: .25s
}

.post .actions .back-btn:hover {
    transform: translateY(-3px);
    background: #d6360e
}

@media (max-width:768px) {
    .post .hero {
        height: 220px
    }

    .post .hero-image .title h1 {
        font-size: 14px
    }

    .post .card {
        padding: 22px;
        border-radius: 16px
    }

    .post .content {
        font-size: 14px;
        line-height: 1.9
    }

    .post .content h1,
    .post .content h2,
    .post .content h3,
    .post .content h4,
    .post .content h5,
    .post .content h6 {
        font-size: 16px !important;
        font-weight: 700 !important
    }
}

.tooltip {
    position: absolute !important;
    z-index: 99999;
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease
}

.tooltip.fade {
    opacity: 0
}

.tooltip.in {
    opacity: 1;
    pointer-events: auto
}

.tooltip .tooltip-inner {
    max-width: 320px;
    padding: 10px 14px;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb,var(--nv-v) 28%,transparent);
    border-radius: 14px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .6);
    white-space: normal;
    word-wrap: break-word;
    text-align: left
}

.tooltip .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid
}

.tooltip.right {
    transform: translateX(-6px)
}

.tooltip.right.in {
    transform: translateX(0)
}

.tooltip.right .tooltip-arrow {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 7px 7px 0;
    border-color: transparent var(--card-bg) transparent transparent
}

.tooltip.top {
    transform: translateY(6px)
}

.tooltip.top.in {
    transform: translateY(0)
}

.tooltip.top .tooltip-arrow {
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px 7px 0;
    border-color: var(--card-bg) transparent transparent transparent
}

.tooltip.bottom {
    transform: translateY(-6px)
}

.tooltip.bottom.in {
    transform: translateY(0)
}

.tooltip.bottom .tooltip-arrow {
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 7px 7px;
    border-color: transparent transparent var(--card-bg) transparent
}

.tooltip.left {
    transform: translateX(6px)
}

.tooltip.left.in {
    transform: translateX(0)
}

.tooltip.left .tooltip-arrow {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 0 7px 7px;
    border-color: transparent transparent transparent var(--card-bg)
}

.tooltip.right {
    transform: translateX(-6px)
}

.tooltip.right.in {
    transform: translateX(0)
}

.tooltip.right .tooltip-arrow {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 7px 7px 0;
    border-color: transparent var(--card-bg) transparent transparent
}

.account {
    padding: 0
}

.account .header {
    text-align: center;
    margin-bottom: 35px
}

.account .header h2 {
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 10px
}

.account .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px
}

.account .card {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 30px var(--shadow-color);
    transition: .25s ease
}

.account .card:hover {
    transform: translateY(-3px);
    border-color: var(--main-color)
}

.account .card .title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 18px
}

.account .card .desc {
    color: var(--text-main);
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.8
}

.account .form-group {
    margin-bottom: 15px
}

.account label {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
    font-size: 14px;
    color: var(--text-main)
}

.account input,
.account select,
.account textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    outline: 0;
    transition: .2s
}

.account input:focus,
.account select:focus,
.account textarea:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 4px var(--main-opacity)
}

.account input[readonly] {
    opacity: .75;
    cursor: not-allowed
}

.account .btn {
    margin-top: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    border: none;
    background: var(--main-color);
    color: var(--text-main);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease
}

.account .btn:hover {
    opacity: .9;
    transform: translateY(-1px)
}

.account .card .help-text {
    display: inline-block;
    margin-top: 8px;
    color: #888;
    font-size: 13px
}

@media (max-width:992px) {
    .account .cards {
        grid-template-columns: 1fr
    }

    .account .header h2 {
        font-size: 28px
    }
}

.account .card-table {
    grid-column: 1/-1
}

.account .table-notifications {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .02)
}

.account .notifications-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px
}

.account .notifications-table thead th {
    background: rgba(255, 255, 255, .03);
    color: var(--text-main);
    font-weight: 900;
    font-size: 14px;
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--border-color)
}

.account .notifications-table tbody td {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--text-main);
    font-size: 14px
}

.account .notifications-table tbody tr:hover td {
    background: rgba(255, 255, 255, .03)
}

.account .notifications-table .notif-name {
    text-align: right;
    font-weight: 800;
    color: var(--text-main);
    min-width: 220px
}

.account .notifications-table .switch {
    width: 18px;
    height: 18px;
    accent-color: var(--main-color);
    cursor: pointer
}

.account .notifications-table .switch:disabled {
    opacity: .4;
    cursor: not-allowed
}

@media (max-width:768px) {
    .notifications .cards {
        grid-template-columns: repeat(2, 1fr) !important
    }

    .notifications .card {
        grid-column: span 2
    }

    .account .card-table {
        padding: 18px
    }

    .account .notifications-table {
        min-width: 600px
    }

    .account .notifications-table tbody td,
    .account .notifications-table thead th {
        padding: 12px;
        font-size: 13px
    }
}

.childpanels {
    padding: 0;
    width: 100%
}

.childpanels>div {
    width: 100%
}

.childpanels .header {
    text-align: center;
    margin-bottom: 35px
}

.childpanels .header h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 10px
}

.childpanels .header p {
    color: var(--text-main);
    font-size: 14px
}

.childpanels .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.childpanels .card {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 30px var(--shadow-color)
}

.childpanels .table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-color)
}

.childpanels-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px
}

.childpanels-table thead th {
    padding: 16px;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-main);
    background: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center
}

.childpanels-table tbody td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color)
}

.childpanels-table tbody tr:hover td {
    opacity: .9
}

.childpanels-table .domain>a {
    text-align: right;
    font-weight: 900;
    color: var(--main-color);
    min-width: 240px
}

.childpanels-table .date {
    opacity: .85
}

.childpanels-table .actions {
    width: 120px
}

.childpanels-table .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main)
}

.childpanels .alert {
    margin-bottom: 20px
}

.childpanels .alert.alert-action {
    justify-content: space-between
}

.childpanels .btn-sm {
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 13px;
    border: none;
    cursor: pointer;
    background: var(--main-color);
    color: var(--text-main);
    box-shadow: 0 8px 18px var(--main-opacity);
    transition: .25s ease
}

.childpanels .btn-sm:hover {
    transform: translateY(-2px)
}

.childpanels .btn-outline {
    background: 0 0;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    box-shadow: none
}

.childpanels .btn-outline:hover {
    background: var(--secondary-color);
    border-color: var(--main-color);
    color: var(--main-color)
}

@media (max-width:768px) {
    .childpanels .header h2 {
        font-size: 20px
    }

    .childpanels .card {
        padding: 14px
    }

    .childpanels .table-responsive {
        overflow: hidden;
        border: none;
        background: 0 0
    }

    .childpanels-table {
        min-width: auto;
        width: 100%
    }

    .childpanels-table thead {
        display: none
    }

    .childpanels-table tbody tr {
        display: block;
        background: var(--secondary-color);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        margin-bottom: 12px;
        padding: 12px
    }

    .childpanels-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 8px;
        border-bottom: 1px solid var(--border-color);
        font-size: 13px
    }

    .childpanels-table tbody td:last-child {
        border-bottom: none
    }

    .childpanels-table tbody td::before {
        content: attr(data-head);
        font-weight: 900;
        color: var(--text-main);
        opacity: .9;
        text-align: right;
        padding-left: 12px;
        flex: 0 0 auto
    }

    .childpanels-table .domain {
        min-width: auto;
        text-align: right
    }

    .childpanels-table .actions {
        width: 100%
    }

    .childpanels-table .actions a {
        width: 100%;
        justify-content: center;
        display: inline-flex
    }
}

.content>.childpanel-create {
    width: 100%;
    max-width: 800px;
    margin-inline: auto
}

.childpanel-create>div {
    width: 100%
}

.childpanel-create .welcome-box h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 15px
}

.childpanel-create .welcome-box {
    background: var(--main-color) !important
}

.childpanel-create .welcome-box p {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 24px;
    opacity: .9
}

.childpanel-create .dns-box,
.childpanel-create .welcome-box {
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    box-shadow: 0 18px 20px var(--shadow-color);
    padding: 22px;
    margin-bottom: 18px
}

.childpanel-create .dns-box .dns-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-main)
}

.childpanel-create .dns-box .dns-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.childpanel-create .dns-box .dns-item {
    height: 56px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    text-align: center;
    letter-spacing: .3px
}

.childpanel-create .cards {
    background: var(--secondary-color);
    border-radius: 20px;
    box-shadow: 0 0 5px var(--shadow-color)
}

.childpanel-create .tabs-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 18px;
    background: var(--bg-color)
}

.childpanel-create .tab-btn {
    height: 56px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-weight: 900;
    cursor: pointer;
    transition: .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.childpanel-create .tab-btn i {
    font-size: 18px;
    opacity: .9
}

.childpanel-create .tab-btn:hover {
    border-color: var(--main-color);
    background: var(--main-opacity);
    color: var(--main-color)
}

.childpanel-create .tab-btn.active {
    background: var(--main-color);
    color: var(--text-main);
    border-color: var(--main-color);
    box-shadow: 0 14px 30px var(--shadow-color)
}

.childpanel-create .tabs-body {
    padding: 20px
}

.childpanel-create .tab-content {
    display: none
}

.childpanel-create .tab-content.active {
    display: block
}

.childpanel-create .store-form form {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.childpanel-create .store-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.childpanel-create .store-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.childpanel-createi .store-field label {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-main);
    opacity: .95
}

.childpanel-create .store-field input,
.childpanel-create .store-field select {
    width: 100%;
    height: 50px;
    border-radius: 16px;
    padding: 0 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    outline: 0;
    transition: .25s ease
}

.childpanel-create .store-field input:focus,
.childpanel-create .store-field select:focus {
    border-color: var(--main-color)
}

.childpanel-create .price-value {
    font-weight: 900;
    color: var(--main-color) !important
}

.childpanel-create .store-submit {
    width: 100%;
    height: 50px;
    border-radius: 18px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    cursor: pointer;
    background: var(--main-color);
    color: var(--text-main);
    box-shadow: 0 10px 22px var(--main-opacity);
    transition: .25s ease;
    margin-top: 10px
}

.childpanel-create .store-submit:hover {
    transform: translateY(-2px);
    background: var(--main-color)
}

.childpanel-create .accordion {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.childpanel-create .accordion-item {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    transition: .25s ease
}

.childpanel-create .accordion-header {
    width: 100%;
    height: 50px;
    padding: 0 18px;
    background: var(--secondary-color);
    color: var(--text-main);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 900;
    font-size: 15px;
    transition: .25s ease
}

.childpanel-create .accordion-header .icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 900;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: .25s ease
}

.childpanel-create .accordion-item.active .accordion-header {
    background: var(--main-color);
    color: var(--text-main)
}

.childpanel-create .accordion-item.active .accordion-header .icon {
    background: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-main)
}

.childpanel-create .accordion-body {
    max-height: 0;
    font-size: 14px;
    overflow: hidden;
    padding: 0 18px;
    background: var(--bg-color);
    transition: max-height .35s ease, padding .35s ease
}

.childpanel-create .accordion-body p {
    color: var(--text-main);
    line-height: 1.9;
    font-size: 14px;
    margin: 0
}

.childpanel-create .accordion-body ul {
    margin-inline-start: 25px;
    padding-bottom: 20px
}

.childpanel-create .accordion-item.active .accordion-body {
    max-height: 2000px;
    padding: 18px
}

.childpanel-create .accordion-item .text {
    font-size: 14px
}

@media (max-width:768px) {

    .childpanel-create .dns-box,
    .childpanel-create .welcome-box {
        padding: 15px
    }

    .childpanel-create .welcome-box h2 {
        font-size: 19px
    }

    .childpanel-create .welcome-box p {
        font-size: 13px;
        line-height: 1.5
    }

    .childpanel-create .tabs-header {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 10px
    }

    .childpanel-create .store-grid {
        grid-template-columns: 1fr
    }

    .childpanel-create .dns-box .dns-item,
    .childpanel-create .tab-btn {
        height: 40px;
        font-size: 15px
    }

    .childpanel-create .dns-box .dns-list {
        grid-template-columns: 1fr
    }

    .childpanel-create .store-field input,
    .childpanel-create .store-field select,
    .childpanel-create .store-submit {
        height: 40px;
        font-size: 14px
    }

    .childpanel-create .store-field label {
        font-size: 14px
    }
}

.affiliates {
    padding: 0
}

.affiliates .header {
    text-align: center;
    margin-bottom: 35px
}

.affiliates .header h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 10px
}

.affiliates .header p {
    color: var(--text-light);
    font-size: 14px
}

.affiliates .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px
}

.affiliates .card {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 12px 30px var(--shadow-color)
}

.affiliates .title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 14px
}

.affiliates .card .content {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.9
}

.affiliates .table-responsive {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-color)
}

.affiliates .table {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px
}

.affiliates .table thead th {
    padding: 16px;
    font-size: 13px;
    font-weight: 900;
    color: var(--text-main);
    background: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center
}

.affiliates .table tbody td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    opacity: .85
}

.affiliates .table tbody tr:hover td {
    opacity: 1
}

.affiliates .table .ref-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color)
}

.affiliates .table .ref-link .value {
    color: var(--text-main);
    font-weight: 800;
    font-size: 13px;
    direction: ltr;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.affiliates .table .copy-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: 0 0;
    color: var(--text-main);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    transition: .25s ease
}

.affiliates .table .copy-btn:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    background: var(--main-opacity)
}

.affiliates .table .money {
    color: var(--main-color);
    font-weight: 900
}

.affiliates .table .badge-soft {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main)
}

.affiliates .table .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main)
}

.affiliates .table .status-completed,
.affiliates .table .status-paid,
.affiliates .table .status-success {
    background: rgba(34, 197, 94, .12);
    color: #86efac;
    border-color: rgba(34, 197, 94, .35)
}

.affiliates .table .status-pending,
.affiliates .table .status-waiting {
    background: rgba(245, 158, 11, .12);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, .35)
}

.affiliates .table .status-canceled,
.affiliates .table .status-failed,
.affiliates .table .status-rejected {
    background: rgba(239, 68, 68, .12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, .35)
}

.affiliates .table .btn-sm {
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 13px;
    border: none;
    cursor: pointer;
    background: var(--main-color);
    color: var(--text-main);
    box-shadow: 0 10px 22px var(--main-opacity);
    transition: .25s ease
}

.affiliates .table .btn-sm:hover {
    transform: translateY(-2px);
    background: var(--main-color)
}

@media (max-width:768px) {
    .affiliates .header h2 {
        font-size: 24px
    }

    .affiliates .card {
        padding: 12px
    }

    .affiliates .table-responsive {
        overflow: visible;
        border: none;
        background: 0 0
    }

    .affiliates .table {
        min-width: 100%;
        border: none
    }

    .affiliates .table thead {
        display: none
    }

    .affiliates .table tbody tr {
        display: block;
        background: var(--secondary-color);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 10px 22px var(--shadow-color)
    }

    .affiliates .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 8px;
        border-bottom: 1px solid var(--border-color);
        text-align: right;
        font-size: 13px
    }

    .affiliates .table tbody td:last-child {
        border-bottom: none
    }

    .affiliates .table tbody td::before {
        content: attr(data-head);
        font-weight: 900;
        color: var(--text-main);
        opacity: .9;
        font-size: 12px;
        white-space: nowrap
    }

    .affiliates .table .td_link {
        flex-direction: column;
        align-items: start
    }

    .affiliates .table .ref-link {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        width: 100%
    }

    .affiliates .table .ref-link .value {
        width: 100%;
        text-align: left
    }

    .affiliates .table .copy-btn {
        width: 100%
    }
}

.table-responsive {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    width: 100%
}

.table-responsive table {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px
}

.table-responsive table thead th {
    padding: 16px;
    font-size: 13px;
    font-weight: 900;
    color: var(--text-main);
    background: var(--secondary-color);
    border-bottom: 1px solid var(--border-color)
}

.table-responsive table tbody td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    opacity: .85
}

.table-responsive table tbody tr:hover td {
    opacity: 1
}

@media (max-width:768px) {
    .table-responsive {
        overflow: visible;
        border: none;
        background: 0 0
    }

    .table-responsive table {
        min-width: 100%;
        border: none
    }

    .table-responsive table thead {
        display: none
    }

    .table-responsive table tbody tr {
        display: block;
        background: var(--secondary-color);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 10px 22px var(--shadow-color)
    }

    .table-responsive table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 8px;
        border-bottom: 1px solid var(--border-color);
        text-align: right;
        font-size: 13px
    }

    .table-responsive table tbody td:last-child {
        border-bottom: none
    }

    .table-responsive table tbody td::before {
        content: attr(data-head);
        font-weight: 900;
        color: var(--text-main);
        opacity: .9;
        font-size: 12px;
        white-space: nowrap
    }
}

#notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 9999;
    pointer-events: none
}

.notify-box {
    background: var(--bg-color);
    color: var(--text-main);
    padding: 14px 22px;
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--shadow-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: all .4s ease
}

#notification.show {
    transform: translateX(-50%) translateY(0)
}

#notification.show .notify-box {
    opacity: 1
}

@media (max-width:768px) {
    #notification.show {
        transform: translateX(-50%) translateY(-120%)
    }
}

.levels-top-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 14px;
    width: 100%
}

.levels-stat {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 30px var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.levels-stat-info p {
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 700
}

.levels-stat-info h3 {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 900
}

.levels-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-opacity);
    border: 1px solid var(--border-color);
    color: var(--main-color);
    font-size: 18px
}

.levels-alert {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-weight: 900;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px var(--shadow-color)
}

.levels-mini-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
    width: 100%
}

.levels-mini-card {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 24px var(--shadow-color);
    text-align: center;
    position: relative;
    min-height: 100px
}

.levels-mini-card .icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px
}

.levels-mini-card p {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px
}

.levels-mini-card h4 {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 900
}

.levels-mini-card .badge {
    margin-top: 8px;
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: var(--main-color);
    border: 1px solid rgba(255, 255, 255, .1);
    background: var(--main-opacity)
}

.levels-table-system {
    margin-top: 18px;
    width: 100%
}

.desktop-only {
    display: block
}

.mobile-only {
    display: none
}

.levels-table-wrapper {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    box-shadow: 0 18px 40px var(--shadow-color)
}

.levels-table-head {
    display: grid;
    grid-template-columns: 1.4fr repeat(6, 1fr);
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid var(--border-color)
}

.levels-table-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(6, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.levels-table-row:last-child {
    border-bottom: none
}

.levels-table-wrapper .cell {
    padding: 18px 14px;
    text-align: center;
    font-weight: 900;
    font-size: 14px;
    color: var(--text-main)
}

.levels-table-wrapper .cell.feature {
    text-align: right;
    padding-right: 22px;
    color: var(--text-main);
    font-size: 14px;
    letter-spacing: -.2px
}

.levels-table-row .cell {
    color: var(--text-main)
}

.levels-table-row:hover {
    background: rgba(255, 255, 255, .02)
}

.levels-table-wrapper .yes {
    color: #22c55e;
    font-size: 18px
}

.levels-table-wrapper .no {
    color: #ef4444;
    font-size: 18px
}

.levels-mobile-tabs {
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--secondary-color);
    box-shadow: 0 16px 40px var(--shadow-color);
    overflow: hidden;
    flex-direction: column
}

.levels-tabs {
    display: flex;
    gap: 8px;
    padding: 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    background: var(--secondary-color)
}

.levels-tabs::-webkit-scrollbar {
    height: 6px
}

.levels-tabs::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 999px
}

.tab-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    transition: .25s ease
}

.tab-btn:hover {
    transform: translateY(-2px);
    border-color: var(--main-color)
}

.tab-btn.active {
    border-color: var(--main-color);
    color: var(--main-color)
}

.levels-tab-content {
    padding: 14px
}

.tab-panel {
    display: none;
    animation: tabFade .18s ease
}

.tab-panel.active {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

@keyframes tabFade {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

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

.feat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    color: var(--text-main);
    font-weight: 900
}

.feat-card span {
    font-size: 14px;
    color: var(--text-main)
}

.feat-card b {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    font-size: 16px
}

.feat-card b.yes {
    color: #22c55e;
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .25)
}

.feat-card b.no {
    color: #ef4444;
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .25)
}

@media (max-width:992px) {
    .levels-table-wrapper .cell {
        padding: 15px 12px;
        font-size: 13px
    }
}

@media (max-width:768px) {
    .desktop-only {
        display: none
    }

    .mobile-only {
        display: block
    }
}

@media (max-width:500px) {

    .levels-mini-cards,
    .levels-top-stats {
        grid-template-columns: 1fr
    }
}

#level-modal .levels-mobile-tabs {
    border: none !important;
    background: 0 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important
}

#level-modal .modal-box {
    width: fit-content !important
}

#level-modal .levels-tab-content {
    padding: 14px 0 !important
}

.ctx {
    position: fixed;
    width: 180px;
    max-width: 90vw;
    background: var(--secondary-color);
    backdrop-filter: blur(50px);
    color: var(----text-main);
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .4);
    padding: 6px;
    z-index: 99999;
    opacity: 0;
    transform: scale(.95);
    transition: .15s ease
}

.ctx.show {
    opacity: 1;
    transform: scale(1)
}

.ctx-header {
    font-weight: 700;
    padding: 8px;
    border-bottom: 1px solid #444;
    margin-bottom: 5px;
    font-size: 13px;
    opacity: .8;
    text-align: end;
    color: var(--main-color)
}

.ctx button {
    width: 100%;
    padding: 10px;
    border: none;
    background: 0 0;
    color: var(--text-main);
    text-align: left;
    border-radius: 8px;
    cursor: pointer
}

.ctx button:hover {
    background: var(--main-opacity)
}

.hidden {
    display: none
}

@media (max-width:600px) {
    .ctx {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        padding: 6px 10px;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .3)
    }

    .ctx-header {
        display: none !important
    }

    .ctx button {
        padding: 6px 10px;
        font-size: 13px;
        border-radius: 12px;
        white-space: nowrap
    }
}

/* Sidebar music player */
.sidebar-body .sidebar-menu {
    flex: 1 1 auto;
    min-height: 0
}

.sidebar-music-player {
    flex: 0 0 auto;
    margin: 8px 12px 20px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--secondary-color);
    box-shadow: 0 8px 18px var(--shadow-color);
    color: var(--text-main)
}

.sidebar-music-player .music-cover {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--main-opacity);
    border: 1px solid var(--border-color);
    color: var(--main-color);
    font-size: 16px;
    box-shadow: inset 0 0 0 5px var(--bg-color)
}

.sidebar-music-player.is-playing .music-cover i {
    animation: musicDiscSpin 4s linear infinite
}

.sidebar-music-player .music-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 11px;
    direction: ltr
}

.sidebar-music-player.is-ltr .music-cover {
    order: -1
}

.sidebar-music-player.is-ltr .music-auto {
    order: 1
}

.sidebar-music-player .music-control {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, transform .2s ease
}

.sidebar-music-player .music-control:hover {
    color: var(--main-color);
    background: var(--main-opacity)
}

.sidebar-music-player .music-control:active {
    transform: scale(.92)
}

.sidebar-music-player .music-control:focus-visible,
.sidebar-music-player input:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px
}

.sidebar-music-player .music-auto {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    font-size: 11px
}

.sidebar-music-player .music-auto.is-active {
    border-color: var(--main-color);
    background: var(--main-opacity);
    color: var(--main-color)
}

.sidebar-music-player .music-play {
    width: 40px;
    height: 40px;
    background: var(--main-color);
    color: var(--bg-color);
    box-shadow: 0 7px 16px var(--main-opacity);
    font-size: 13px
}

.sidebar-music-player .music-play:hover {
    background: var(--main-color);
    color: var(--bg-color)
}

.sidebar-music-player .music-range-row {
    display: flex;
    align-items: center;
    gap: 9px;
    direction: ltr
}

.sidebar-music-player.is-ltr .music-mute {
    order: -1
}

.sidebar-music-player input[type="range"] {
    min-width: 0;
    height: 4px;
    flex: 1;
    border-radius: 999px;
    accent-color: var(--main-color);
    cursor: pointer;
    direction: ltr
}

.sidebar-music-player .music-mute {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 12px
}

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

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

@media (prefers-reduced-motion:reduce) {
    .sidebar-music-player .music-cover i {
        animation: none !important
    }
}

@media (max-width:991px) {
    .sidebar-music-player {
        margin-bottom: 20px
    }
}

/* Sidebar logout button */
.sidebar-logout-btn {
    display: flex;
    gap: 10px;
    background: rgba(255, 60, 60, .08);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
    cursor: pointer;
    margin: 0 16px 12px;
    transform: translateY(-8px);
    text-decoration: none !important;
    color: #ff4d4d;
    border: 1px solid rgba(255, 60, 60, .2)
}

.sidebar-logout-btn:hover {
    background: rgba(255, 60, 60, .15);
    color: #ff4d4d;
    border-color: rgba(255, 60, 60, .3)
}

.sidebar-logout-btn i {
    font-size: 18px;
    line-height: 0
}











































@media (max-width:991px) {
    html[dir="ltr"] .main-wrapper .page-content {
        width: 100% !important;
        margin-inline-start: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    html[dir="ltr"] .sidebar {
        margin-left: -240px !important;
        margin-right: 0 !important
    }

    html[dir="ltr"] body.sidebar-open .sidebar {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
}

.files-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 29px
}

.files-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    line-height: 29px
}

.files-item:last-child {
    margin-bottom: 0
}

.files-loader {
    margin: 0 .2em 0 0;
    padding: 0;
    line-height: 0;
    vertical-align: middle;
    font-size: 24px;
    display: flex;
    align-items: center;
    min-height: 29px
}

.files-loader__svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: transparent;
    transform: rotate(180deg);
    margin: 0 8px
}

.files-loader__svg-circle {
    fill: transparent
}

.files-loader__svg-progress {
    transition: all .4s
}

.sidebar-body .sidebar-menu.sidebar-menu-flat {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 10px !important;
    box-sizing: border-box !important;
    overflow-y: auto
}

.sidebar-menu-flat>.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    box-sizing: border-box !important
}

.sidebar-menu-flat>.nav-menu>li {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important
}

.sidebar-menu-flat>.nav-menu>li>a {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 7px 10px;
    border-radius: 12px;
    box-sizing: border-box !important;
    color: var(--text-main);
    text-decoration: none;
    background: transparent;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease
}

.main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 10px;
    background: var(--secondary-color) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color)
}

.main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon i {
    margin: 0;
    font-size: 20px;
    line-height: 1;
    color: inherit
}

.sidebar-menu-flat .nav-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: inherit
}



html.dark .sidebar-menu-flat>.nav-menu>li.active>a {
    background: var(--nv-mix, linear-gradient(120deg, var(--nv-v), var(--nv-v2) 48%, var(--nv-f))) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px -12px var(--nv-glow, color-mix(in srgb, var(--nv-f) 48%, transparent)) !important
}



html.dark .sidebar-menu-flat>.nav-menu>li:not(.active)>a:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--nv-v) 18%, transparent), color-mix(in srgb, var(--nv-f) 10%, transparent)) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--nv-v) 10%, transparent) !important
}



html.dark .main-wrapper .sidebar-menu-flat>.nav-menu>li.active>a .nav-icon {
    background: rgba(5, 5, 7, .38) !important;
    color: #f8f7ff !important;
    border-color: rgba(248, 247, 255, .18) !important
}



html.dark .main-wrapper .sidebar-menu-flat>.nav-menu>li:not(.active)>a:hover .nav-icon {
    background: color-mix(in srgb, var(--nv-v) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--nv-v) 30%, transparent) !important
}

.sidebar-menu-flat .menu-title,
.sidebar-menu-flat .side-title {
    display: none !important
}

html[dir="rtl"] .sidebar-menu-flat>.nav-menu>li>a {
    direction: rtl;
    text-align: right
}

html[dir="ltr"] .sidebar-menu-flat>.nav-menu>li>a {
    direction: ltr;
    text-align: left
}

/* === Services responsive table layout === */
      .services .order-now-text { display:none; }
      .services .metric-icon { display:none; }
      .services .desktop-value-icon { display:none; }
      
      @media (min-width:769px) {
         .services .table-wrapper { overflow-x:auto; border:0; border-radius:0; background:transparent; box-shadow:none; }
         .services .table-wrapper table { min-width:980px; margin:0; table-layout:auto; }
         .services .table-wrapper .service-columns-row th { padding:15px 10px; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); background:color-mix(in srgb,var(--card-bg) 76%,var(--bg-color)); color:color-mix(in srgb,var(--main-color) 72%,var(--text-main)); font-size:11px; font-weight:800; text-align:center; white-space:nowrap; }
         .services .table-wrapper .service-columns-row th:first-child { text-align:start; padding-inline-start:20px; border-radius:0; }
         .services .table-wrapper .service-columns-row th:last-child { border-radius:0; }
         .services .table-wrapper .service-columns-row th i { margin-inline-end:6px; color:var(--main-color); font-size:16px; vertical-align:middle; }
         .services .table-wrapper tbody tr.service-row { background:transparent!important; box-shadow:none; }
         .services .table-wrapper tbody tr.service-row:hover { transform:none; }
         .services .table-wrapper .service-row>td { padding:14px 10px; vertical-align:middle; border-bottom:1px solid var(--border-color); background:var(--secondary-color); }
         .services .table-wrapper .service-row>td:nth-child(1) { width:95px; padding-inline-start:18px; }
         .services .table-wrapper .service-row>td:nth-child(2) { width:34%; }
         .services .table-wrapper .service-row>td:nth-child(3),
         .services .table-wrapper .service-row>td:nth-child(4),
         .services .table-wrapper .service-row>td:nth-child(5),
         .services .table-wrapper .service-row>td:nth-child(6) { min-width:120px; text-align:center; }
         .services .table-wrapper .service-row>td:last-child { width:145px; padding-inline-end:18px; }
         .services .table-wrapper .service-row .service-label { display:none; }
         .services .table-wrapper .service-row .service-name .service-value { font-size:13px; font-weight:700; line-height:1.6; }
         .services .table-wrapper .service-row .td-badge { gap:8px; min-width:100px; justify-content:center; padding:8px 13px; background:color-mix(in srgb,var(--card-bg) 88%,var(--bg-color)); border-color:color-mix(in srgb,var(--border-color) 78%,transparent); color:var(--text-main); }
         .services .table-wrapper .desktop-value-icon { display:inline-grid; place-items:center; color:var(--main-color); font-size:17px; }
         .services .table-wrapper .actions-item { justify-content:center; }
         .services .table-wrapper .btn-order-now,
         .services .table-wrapper .btn-fav,
         .services .table-wrapper .btn-details { width:38px; height:38px; min-width:38px; padding:0; }
         .services .table-wrapper .btn-order-now { background:linear-gradient(135deg,var(--nv-v2) 0%,#a855f7 100%); color:#f9f7ff; }
         .services .table-wrapper .btn-details { font-size:0; }
         .services .table-wrapper .btn-details::before { content:"\f06e"; font-family:"Font Awesome 6 Free"; font-size:14px; font-weight:900; }
         .services .table-wrapper tr.category-row td { padding:0!important; border-bottom:1px solid var(--border-color); border-radius:15px 15px 0 0; background-clip:padding-box!important; }
         
         .services .table-wrapper tr.category-row .category-inner { font-size:15px; }
         .services .table-wrapper tr.category-row:not(:first-child) td { border-top:14px solid transparent!important; }
         .services .table-wrapper tr.service-row:has(+ tr.category-row)>td:first-child,
         .services .table-wrapper tr.service-row:last-child>td:first-child { border-end-start-radius:15px; }
         .services .table-wrapper tr.service-row:has(+ tr.category-row)>td:last-child,
         .services .table-wrapper tr.service-row:last-child>td:last-child { border-end-end-radius:15px; }
         html.dark .services .table-wrapper .service-row .td-badge { background:#101522; border-color:#263044; }
         html.dark .services .table-wrapper .desktop-value-icon { color:var(--nv-v2); }
      }
      @media (max-width:768px) {
         .services .table-wrapper .service-columns-row { display:none!important; }
         .services .table-wrapper { padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
         .services .table-wrapper table { border-collapse:separate; }
         .services .table-wrapper tr.category-row { margin:18px 0 8px; }
         .services .table-wrapper tr.category-row:first-child { margin-top:0; }
         .services .table-wrapper tr.category-row td.category-name { padding:0!important; border:0!important; }
         .services .table-wrapper .category-box { width:100%; padding:0; }
         .services .table-wrapper .category-inner { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; min-height:44px; padding:10px 14px; border-radius:11px; color:#f9f7ff; background:linear-gradient(135deg,var(--nv-v) 0%,#9333ea 100%); box-shadow:0 8px 20px color-mix(in srgb,var(--nv-v) 20%,transparent); font-size:13px; }
         .services .table-wrapper .category-inner strong { flex:0 1 auto; }
         .services .table-wrapper .category-inner>span,
         .services .table-wrapper .category-inner>img { order:0; font-size:20px; }
         .services .table-wrapper tr.service-row { position:relative; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"id name name name" "min min rate rate" "time time max max" "actions actions actions actions"; gap:6px; margin:0 0 12px; padding:9px; border:1px solid var(--border-color); border-radius:13px; background:var(--secondary-color); box-shadow:0 10px 24px var(--shadow-color); }
         .services .table-wrapper tr.service-row>td { min-width:0; min-height:62px; padding:9px 10px!important; border:1px solid color-mix(in srgb,var(--border-color) 78%,transparent)!important; border-radius:9px; background:color-mix(in srgb,var(--card-bg) 88%,var(--bg-color)); flex-direction:column; align-items:flex-start!important; justify-content:center!important; gap:4px; }
         .services .table-wrapper tr.service-row>td:nth-child(1) { grid-area:id; width:100%!important; min-height:48px; padding:4px!important; border:0!important; background:transparent; align-items:flex-start!important; justify-content:center!important; }
         .services .table-wrapper tr.service-row>td:nth-child(1) .service-label { display:none; }
         .services .table-wrapper tr.service-row>td:nth-child(2) { grid-area:name; min-height:48px; align-items:flex-start; justify-content:center!important; border:0!important; background:transparent; padding:4px!important; text-align:start; }
         html[dir="rtl"] .services .table-wrapper tr.service-row>td:nth-child(2) { transform:translateX(36px); }
         html[dir="ltr"] .services .table-wrapper tr.service-row>td:nth-child(2) { transform:translateX(-36px); }
         .services .table-wrapper tr.service-row>td:nth-child(3) { grid-area:rate; }
         .services .table-wrapper tr.service-row>td:nth-child(4) { grid-area:min; }
         .services .table-wrapper tr.service-row>td:nth-child(5) { grid-area:max; }
         .services .table-wrapper tr.service-row>td:nth-child(6) { grid-area:time; }
         .services .table-wrapper tr.service-row>td:nth-child(n+3):not(:last-child) { position:relative; padding-inline-end:50px!important; }
         .services .table-wrapper tr.service-row>td:last-child { grid-area:actions; min-height:0; padding:0!important; border:0!important; background:transparent; }
         .services .table-wrapper .service-label { padding:0 0 2px; color:color-mix(in srgb,var(--main-color) 72%,var(--text-main)); font-size:10px; font-weight:700; line-height:1.3; }
         .services .table-wrapper .metric-label { display:block; width:100%; }
         .services .table-wrapper .metric-icon { position:absolute; inset-inline-end:10px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:32px; height:32px; border:1px solid color-mix(in srgb,var(--main-color) 34%,transparent); border-radius:50%; background:rgba(128,73,235,.16); background:color-mix(in srgb,var(--main-color) 18%,transparent); color:color-mix(in srgb,var(--main-color) 78%,var(--text-main)); font-size:15px; }
         .services .table-wrapper .service-value { color:var(--text-main); font-size:13px; font-weight:800; line-height:1.25; }
         .services .table-wrapper .service-value.td-badge { display:block; padding:0; border:0; border-radius:0; background:transparent; }
         .services .table-wrapper td.service-name .service-label { display:none; }
         .services .table-wrapper td.service-name .service-value { width:100%; line-height:1.55; font-size:12px; text-align:start; }
         .services .table-wrapper .actions-item { display:grid; grid-template-columns:minmax(0,1.7fr) 52px minmax(0,1fr); gap:7px; width:100%; }
         .services .table-wrapper .actions-item:not(:has(.btn-details)) { grid-template-columns:minmax(0,1fr) 52px; }
         .services .table-wrapper .actions-item>* { width:100%!important; min-height:38px; height:auto!important; margin:0; padding:6px 9px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
         .services .table-wrapper .btn-order-now { gap:7px; background:linear-gradient(135deg,var(--nv-v2) 0%,#a855f7 100%); color:#f9f7ff; font-size:12px; font-weight:800; white-space:nowrap; }
         .services .table-wrapper .order-now-text { display:inline; }
         .services .table-wrapper .btn-fav { border:1px solid var(--border-color); background:var(--card-bg); color:var(--main-color); }
         .services .table-wrapper .btn-details { border:1px solid var(--border-color); background:var(--card-bg); color:var(--main-color); font-size:11px; }
         .services .table-wrapper .service-desc { display:none!important; }
         html.dark .services .table-wrapper tr.service-row>td:nth-child(n+3):not(:last-child) { background:#101522; border-color:#263044!important; }
         html.dark .services .table-wrapper .service-label { color:var(--nv-v2); }
         html.dark .services .table-wrapper .metric-icon { border-color:color-mix(in srgb,var(--nv-v) 30%,transparent); background:color-mix(in srgb,var(--nv-v) 18%,transparent); color:var(--nv-v2); }
      }
/* === End services responsive table layout === */

/* === Orders card layout === */
.orders .orders-cards-section{width:100%}
.orders .orders-bulk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px;padding:10px 12px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg)}
.orders .orders-select-all{display:flex;align-items:center;gap:9px;color:var(--text-main);font-size:12px;font-weight:800}
.orders .orders-cards-section .order-checkbox,.orders .orders-cards-section .select-all-checkbox{display:none}
.orders .orders-cards-section .custom-checkbox{position:relative;display:inline-flex;width:18px;height:18px;flex:0 0 18px;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-color);cursor:pointer}
.orders .orders-cards-section .order-checkbox:checked+.custom-checkbox,.orders .orders-cards-section .select-all-checkbox:checked+.custom-checkbox{border-color:var(--main-color);background:var(--main-color)}
.orders .orders-cards-section .order-checkbox:checked+.custom-checkbox::after,.orders .orders-cards-section .select-all-checkbox:checked+.custom-checkbox::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:#f9f7ff;font-size:11px;font-weight:900}
.orders .orders-cards-section .copy-selected{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border-color);border-radius:10px;background:var(--main-color);color:#f9f7ff;cursor:pointer;transition:opacity .2s ease}
.orders .orders-cards-section .copy-selected:disabled{opacity:.28;pointer-events:none}
.orders .orders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;width:100%}
.orders .order-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:1px solid var(--border-color);border-radius:16px;background:var(--secondary-color);color:var(--text-main);box-shadow:0 10px 24px var(--shadow-color);overflow:hidden}
.orders .order-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.orders .order-card-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:800;line-height:1}
.orders .order-card-status .status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.orders .order-card-status .status-icon{font-size:14px;transform-origin:center}
.orders .status-completed .order-card-status{color:#22c55e;background:rgba(34,197,94,.10)}
.orders .status-pending .order-card-status{color:#f59e0b;background:rgba(245,158,11,.10)}
.orders .status-inprogress .order-card-status,.orders .status-processing .order-card-status{color:#3b82f6;background:rgba(59,130,246,.10)}
.orders .status-partial .order-card-status{color:#a855f7;background:rgba(168,85,247,.10)}
.orders .status-canceled .order-card-status{color:#ef4444;background:rgba(239,68,68,.10)}
.orders .status-default .order-card-status{color:var(--main-color);background:var(--main-opacity)}
.orders .order-card-id{display:flex;align-items:center;gap:8px}
.orders .order-card-id .id-r{display:flex}
.orders .order-card .btn-copy{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--main-color) 34%,transparent);border-radius:9px;background:var(--main-opacity);color:var(--main-color);font-size:11px;line-height:1;cursor:pointer}
.orders .order-card .btn-copy.copied{background:#22c55e!important;color:#f9f7ff!important}
.orders .order-card-service{display:flex;align-items:flex-start;min-height:42px}
.orders .order-card-service .service-id{color:var(--main-color);font-weight:900}
.orders .order-card-service .service-separator{color:var(--text-light)}
.orders .order-card-service p{margin:0;color:var(--text-main);font-size:12px;font-weight:800;line-height:1.65}
.orders .order-card-link{display:flex;align-items:center;gap:7px;min-width:0;padding:8px 10px;border:1px solid var(--border-color);border-radius:9px;background:color-mix(in srgb,var(--card-bg) 82%,var(--bg-color));color:var(--text-light);font-size:10px;direction:ltr}
.orders .order-card-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orders .order-card-link i{flex:0 0 auto;color:var(--main-color);font-size:15px}
.orders .order-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-light);font-size:10px}
.orders .order-card-meta span,.orders .order-card-meta strong{display:inline-flex;align-items:center;gap:5px}
.orders .order-card-meta strong{color:var(--main-color)}
.orders .order-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:2px}
.orders .order-card-stats>div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 5px;border:1px solid var(--border-color);border-radius:9px;background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color))}
.orders .order-card-stats span{display:inline-flex;align-items:center;justify-content:center;gap:4px;color:var(--text-light);font-size:9px;white-space:nowrap}
.orders .order-card-stats span i{color:var(--main-color);font-size:13px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.orders .order-card-stats b{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--text-main);font-size:11px}
.orders .order-card-actions{min-height:30px;border-top:1px solid var(--border-color);padding-top:10px}
.orders .order-card-actions:empty{display:none}
.orders .order-card .order-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.orders .order-card .order-actions:empty{display:none}
.orders .order-card .order-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:6px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--main-color);font-size:10px;font-weight:800}
.orders .order-card .order-actions .btn[disabled]{opacity:.55;cursor:not-allowed}
.orders .order-card .order-actions .text-muted{display:inline-flex;align-items:center;gap:5px;color:var(--text-light);font-size:10px;font-weight:700}
.orders .order-card .action-icon{font-size:14px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.orders .order-card .order-actions a:hover .action-icon{transform:rotate(-18deg) scale(1.08)}
.orders .order-card .btn-copy.copied i{animation:orderIconConfirm .38s cubic-bezier(.22,1,.36,1)}
.orders .status-pending .status-icon{animation:orderStatusPulse 1.8s ease-in-out infinite}
.orders .status-inprogress .status-icon{animation:orderStatusNudge 1.6s ease-in-out infinite}
.orders .status-processing .status-icon,.orders .action-icon-spin{animation:orderStatusSpin 1.5s linear infinite}
.orders .status-completed .status-icon{animation:orderIconConfirm .45s cubic-bezier(.22,1,.36,1) both}
@keyframes orderStatusSpin{to{transform:rotate(360deg)}}
@keyframes orderStatusPulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes orderStatusNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-2px)}}
@keyframes orderIconConfirm{0%{opacity:0;transform:scale(.55)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.orders .status-icon,.orders .action-icon,.orders .order-card-stats span i,.orders .btn-copy i{animation:none!important;transition:none!important;transform:none!important}}
html.dark .orders .order-card{background:#11151c}
html.dark .orders .order-card-link,html.dark .orders .order-card-stats>div{background:#0d121d}
@media (max-width:768px){
  .orders .orders-bulk-toolbar{margin-bottom:10px}
  .orders .orders-grid{grid-template-columns:1fr;gap:10px}
  .orders .order-card{padding:12px;border-radius:14px}
  .orders .order-card-service p{font-size:11px}
  .orders .order-card-meta{align-items:flex-start;flex-direction:column;gap:6px}
}
@media (max-width:420px){
  .orders .order-card-header{align-items:flex-start}
  .orders .order-card-id{gap:5px}
  .orders .order-card .btn-copy{padding:6px 7px}
  .orders .order-card-stats span{font-size:8px}
}
/* === End orders card layout === */

/* === Subscriptions card layout === */
.subscriptions-page{display:flex;flex-direction:column;gap:14px}
.subscriptions-page .subscriptions-filters{margin:0}
.subscriptions-page .subscriptions-search{margin:0;max-width:none}
.subscriptions-page .subscriptions-search .input-group{width:100%}
.subscriptions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.subscription-card{display:flex;flex-direction:column;gap:11px;min-width:0;padding:14px;border:1px solid var(--border-color);border-radius:16px;background:var(--secondary-color);color:var(--text-main);box-shadow:0 10px 24px var(--shadow-color);overflow:hidden}
.subscription-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.subscription-card-id{display:flex;align-items:center;min-width:0}
.subscription-card .btn-copy{display:inline-flex;align-items:center;gap:6px;min-height:29px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--main-color) 34%,transparent);border-radius:9px;background:var(--main-opacity);color:var(--main-color);font-size:11px;line-height:1;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.subscription-card .btn-copy:hover{border-color:color-mix(in srgb,var(--main-color) 62%,transparent);background:color-mix(in srgb,var(--main-color) 22%,transparent)}
.subscription-card .btn-copy.copied{border-color:#22c55e!important;background:#22c55e!important;color:#f9f7ff!important}
.subscription-card .btn-copy i{font-size:12px}
.subscription-card .btn-copy.copied i{animation:orderIconConfirm .38s cubic-bezier(.22,1,.36,1)}
.subscription-status{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:800}
.subscription-status-active .subscription-status{color:#20c979;background:rgba(32,201,121,.1)}
.subscription-status-paused .subscription-status{color:#f4a619;background:rgba(244,166,25,.1)}
.subscription-status-completed .subscription-status{color:#20c979;background:rgba(32,201,121,.1)}
.subscription-status-expired .subscription-status,.subscription-status-canceled .subscription-status{color:#ef5350;background:rgba(239,83,80,.1)}
.subscription-status-default .subscription-status{color:var(--text-light);background:color-mix(in srgb,var(--text-light) 8%,transparent)}
.subscription-status-active .status-icon{animation:orderStatusNudge 1.6s ease-in-out infinite}
.subscription-status-paused .status-icon{animation:orderStatusPulse 1.8s ease-in-out infinite}
.subscription-status-completed .status-icon{animation:orderIconConfirm .45s cubic-bezier(.22,1,.36,1) both}
.subscription-service{display:flex;align-items:center;min-width:0}
.subscription-service-id{color:var(--main-color);font-weight:900}
.subscription-service .service-separator{color:var(--text-light)}
.subscription-service p{margin:0;color:var(--text-main);font-size:12px;font-weight:800;line-height:1.6}
.subscription-account{display:flex;align-items:center;gap:7px;min-width:0;padding:8px 10px;border:1px solid var(--border-color);border-radius:9px;background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color));color:var(--text-light);font-size:10px}
.subscription-account i{color:var(--main-color);font-size:14px}
.subscription-account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subscription-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.subscription-stats>div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px;border:1px solid var(--border-color);border-radius:10px;background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color))}
.subscription-stats span{display:flex;align-items:center;gap:5px;color:var(--text-light);font-size:9px;font-weight:700}
.subscription-stats span i{color:var(--main-color);font-size:14px}
.subscription-stats b,.subscription-stats b a{color:var(--text-main);font-size:11px}
.subscription-stats b a{color:var(--main-color)}
.subscription-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:2px}
.subscription-dates>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 5px;min-width:0;padding:7px;border:1px solid var(--border-color);border-radius:9px}
.subscription-dates i{grid-row:1/3;color:var(--main-color);font-size:15px}
.subscription-dates small{color:var(--text-light);font-size:8px;white-space:nowrap}
.subscription-dates b{overflow:hidden;color:var(--text-main);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.subscription-reason{display:flex;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:8px;background:rgba(244,166,25,.1);color:#d9940f;font-size:9px;font-weight:700}
.subscription-reason i{font-size:14px}
.subscription-actions{display:flex;align-items:center;gap:7px;min-height:31px;padding-top:10px;border-top:1px solid var(--border-color)}
.subscription-actions:empty{display:none}
.subscription-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:6px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--main-color);font-size:10px;font-weight:800}
.subscription-actions .btn-primary{border-color:transparent;background:var(--main-color);color:#fff}
.subscription-actions .action-icon{font-size:14px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.subscription-actions a:hover .action-icon{transform:rotate(-18deg) scale(1.08)}
.subscriptions-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px;border:1px dashed var(--border-color);border-radius:16px;color:var(--text-light)}
.subscriptions-empty i{color:var(--main-color);font-size:32px}
html.dark .subscription-card{background:#11151c}
html.dark .subscription-account,html.dark .subscription-stats>div{background:#0d121d}
@media (prefers-reduced-motion:reduce){.subscription-card .status-icon,.subscription-card .btn-copy i,.subscription-actions .action-icon{animation:none!important;transition:none!important;transform:none!important}}
@media (max-width:1200px){.subscriptions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .subscriptions-page{gap:10px}
  .subscriptions-grid{grid-template-columns:1fr;gap:10px}
  .subscription-card{padding:12px;border-radius:14px}
  .subscription-dates{grid-template-columns:1fr}
  .subscription-dates>span{grid-template-columns:auto auto 1fr}
  .subscription-dates i{grid-row:auto}
  .subscription-dates b{text-align:end}
}
@media (max-width:420px){.subscription-stats span{font-size:8px}.subscription-service p{font-size:11px}}
/* === End subscriptions card layout === */

/* === Refunds card layout === */
.refunds-page{display:flex;flex-direction:column;gap:14px}
.refunds-alert{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--main-color) 30%,var(--border-color));border-radius:11px;background:color-mix(in srgb,var(--main-color) 9%,var(--secondary-color));color:var(--text-main);font-size:11px;font-weight:700}
.refunds-alert i{flex:0 0 auto;color:var(--main-color);font-size:18px}
.refunds-page .refunds-search{margin:0;max-width:none}
.refunds-page .refunds-search .input-group{width:100%}
.refunds-page .refunds-filters{margin:0}
.refunds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.refund-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:1px solid var(--border-color);border-radius:16px;background:var(--secondary-color);color:var(--text-main);box-shadow:0 10px 24px var(--shadow-color);overflow:hidden}
.refund-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.refund-order-id{display:flex;align-items:center;gap:6px;min-width:0}
.refund-order-link,.refund-copy{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:29px;border:1px solid color-mix(in srgb,var(--main-color) 34%,transparent);border-radius:9px;background:var(--main-opacity);color:var(--main-color);font-size:11px;line-height:1}
.refund-order-link{padding:6px 9px}
.refund-copy{width:29px;padding:6px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.refund-order-link:hover,.refund-copy:hover{border-color:color-mix(in srgb,var(--main-color) 62%,transparent);background:color-mix(in srgb,var(--main-color) 22%,transparent);color:var(--main-color)}
.refund-copy.copied{border-color:#22c55e!important;background:#22c55e!important;color:#f9f7ff!important}
.refund-copy.copied i{animation:orderIconConfirm .38s cubic-bezier(.22,1,.36,1)}
.refund-status{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}
.refund-status-partial .refund-status{color:#a855f7;background:rgba(168,85,247,.1)}
.refund-status-canceled .refund-status{color:#ef4444;background:rgba(239,68,68,.1)}
.refund-status-default .refund-status{color:var(--text-light);background:color-mix(in srgb,var(--text-light) 8%,transparent)}
.refund-status-partial .status-icon{animation:orderStatusPulse 1.8s ease-in-out infinite}
.refund-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.refund-details>div{display:flex;flex-direction:column;gap:7px;min-width:0;padding:10px;border:1px solid var(--border-color);border-radius:10px;background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color))}
.refund-details span{display:flex;align-items:center;gap:5px;color:var(--text-light);font-size:9px;font-weight:700}
.refund-details span i{color:var(--main-color);font-size:14px}
.refund-details b{overflow:hidden;color:var(--text-main);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.refunds-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px;border:1px dashed var(--border-color);border-radius:16px;color:var(--text-light)}
.refunds-empty i{color:var(--main-color);font-size:32px}
.refunds-page .pagination{margin:6px 0 0}
html.dark .refund-card{background:#11151c}
html.dark .refund-details>div{background:#0d121d}
@media (prefers-reduced-motion:reduce){.refund-card .status-icon,.refund-copy i{animation:none!important;transition:none!important;transform:none!important}}
@media (max-width:1200px){.refunds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.refunds-page{gap:10px}.refunds-grid{grid-template-columns:1fr;gap:10px}.refund-card{padding:12px;border-radius:14px}}
@media (max-width:420px){.refund-card-header{align-items:flex-start}.refund-status{font-size:9px}.refund-details{grid-template-columns:1fr}}
/* === End refunds card layout === */

/* === Drip feed and refill card layouts === */
.drip-feed-page,.refill-page{display:flex;flex-direction:column;gap:14px}
.drip-feed-page .drip-feed-search,.refill-page .refill-search{margin:0;max-width:none}
.drip-feed-page .drip-feed-search .input-group,.refill-page .refill-search .input-group{width:100%}
.drip-feed-page .drip-feed-filters,.refill-page .refill-filters{margin:0}
.drip-feed-grid,.refill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.drip-feed-card,.refill-card{display:flex;flex-direction:column;gap:11px;min-width:0;padding:14px;border:1px solid var(--border-color);border-radius:16px;background:var(--secondary-color);color:var(--text-main);box-shadow:0 10px 24px var(--shadow-color);overflow:hidden}
.drip-card-header,.refill-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.drip-feed-card .btn-copy,.refill-card .btn-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:29px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--main-color) 34%,transparent);border-radius:9px;background:var(--main-opacity);color:var(--main-color);font-size:11px;line-height:1;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.drip-feed-card .btn-copy:hover,.refill-card .btn-copy:hover{border-color:color-mix(in srgb,var(--main-color) 62%,transparent);background:color-mix(in srgb,var(--main-color) 22%,transparent)}
.drip-feed-card .btn-copy.copied,.refill-card .btn-copy.copied{border-color:#22c55e!important;background:#22c55e!important;color:#f9f7ff!important}
.drip-feed-card .btn-copy.copied i,.refill-card .btn-copy.copied i{animation:orderIconConfirm .38s cubic-bezier(.22,1,.36,1)}
.drip-status,.refill-status{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}
.drip-status-active .drip-status,.refill-status-completed .refill-status{color:#20c979;background:rgba(32,201,121,.1)}
.drip-status-completed .drip-status{color:#20c979;background:rgba(32,201,121,.1)}
.drip-status-canceled .drip-status,.refill-status-rejected .refill-status,.refill-status-error .refill-status{color:#ef4444;background:rgba(239,68,68,.1)}
.refill-status-pending .refill-status{color:#f4a619;background:rgba(244,166,25,.1)}
.refill-status-inprogress .refill-status{color:#2f80ed;background:rgba(47,128,237,.1)}
.drip-status-default .drip-status,.refill-status-default .refill-status{color:var(--text-light);background:color-mix(in srgb,var(--text-light) 8%,transparent)}
.drip-status-active .status-icon,.refill-status-inprogress .status-icon{animation:orderStatusNudge 1.6s ease-in-out infinite}
.refill-status-pending .status-icon{animation:orderStatusPulse 1.8s ease-in-out infinite}
.drip-status-completed .status-icon,.refill-status-completed .status-icon{animation:orderIconConfirm .45s cubic-bezier(.22,1,.36,1) both}
.drip-service,.refill-service{min-width:0}
.drip-service p,.refill-service p{margin:0;color:var(--text-main);font-size:12px;font-weight:800;line-height:1.65}
.drip-service p span,.refill-service p span{color:var(--main-color);font-weight:900}
.drip-service p em,.refill-service p em{color:var(--text-light);font-style:normal}
.drip-link,.refill-link{display:flex;align-items:center;gap:7px;min-width:0;padding:8px 10px;border:1px solid var(--border-color);border-radius:9px;background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color));color:var(--text-light);font-size:10px}
.drip-link i,.refill-link i{flex:0 0 auto;color:var(--main-color);font-size:14px}
.drip-link span,.refill-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drip-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.drip-stats>div,.refill-details>div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px;border:1px solid var(--border-color);border-radius:10px;background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color))}
.drip-stats span,.refill-details>div>span{display:flex;align-items:center;gap:5px;color:var(--text-light);font-size:9px;font-weight:700}
.drip-stats span i,.refill-details>div>span i{color:var(--main-color);font-size:14px}
.drip-stats b,.drip-stats b a,.refill-details b{overflow:hidden;color:var(--text-main);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.drip-stats b a{color:var(--main-color)}
.drip-actions{display:flex;align-items:center;gap:7px;padding-top:10px;border-top:1px solid var(--border-color)}
.drip-actions .btn{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:6px 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--main-color);font-size:10px;font-weight:800}
.drip-actions .action-icon{font-size:14px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.drip-actions a:hover .action-icon{transform:rotate(-18deg) scale(1.08)}
.refill-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.refill-order-value{display:flex;align-items:center;justify-content:space-between;gap:7px}
.refill-order-value>a{overflow:hidden;color:var(--main-color);font-size:11px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.refill-order-value .btn-copy{flex:0 0 27px;width:27px;min-height:27px;padding:5px}
.history-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px;border:1px dashed var(--border-color);border-radius:16px;color:var(--text-light)}
.history-empty i{color:var(--main-color);font-size:32px}
html.dark .drip-feed-card,html.dark .refill-card{background:#11151c}
html.dark .drip-link,html.dark .refill-link,html.dark .drip-stats>div,html.dark .refill-details>div{background:#0d121d}
@media (prefers-reduced-motion:reduce){.drip-feed-card .status-icon,.refill-card .status-icon,.drip-feed-card .btn-copy i,.refill-card .btn-copy i,.drip-actions .action-icon{animation:none!important;transition:none!important;transform:none!important}}
@media (max-width:1200px){.drip-feed-grid,.refill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.drip-feed-page,.refill-page{gap:10px}.drip-feed-grid,.refill-grid{grid-template-columns:1fr;gap:10px}.drip-feed-card,.refill-card{padding:12px;border-radius:14px}}
@media (max-width:420px){.drip-card-header,.refill-card-header{align-items:flex-start}.drip-status,.refill-status{font-size:9px}.refill-details{grid-template-columns:1fr}.drip-service p,.refill-service p{font-size:11px}}
/* === End drip feed and refill card layouts === */

/* === Updates responsive table === */
.updates-page{display:flex;width:100%;min-width:0;box-sizing:border-box;flex-direction:column;gap:14px}
.updates-page .updates-search{margin:0;max-width:none}
.updates-page .updates-search .input-group{width:100%}
.updates-page .updates-filters{margin:0}
.updates-table-shell{width:100%;min-width:0;box-sizing:border-box;overflow:hidden;border:1px solid var(--border-color);border-radius:16px;background:var(--secondary-color);box-shadow:0 10px 24px var(--shadow-color)}
.updates-table{width:100%;border-collapse:collapse;table-layout:fixed}
.updates-table th{padding:13px 14px;border-bottom:1px solid var(--border-color);background:color-mix(in srgb,var(--card-bg) 84%,var(--bg-color));color:var(--main-color);font-size:10px;font-weight:800;text-align:start}
.updates-table th:nth-child(1){width:42%}
.updates-table th:nth-child(2){width:15%}
.updates-table th:nth-child(3){width:37%}
.updates-table th:nth-child(4){width:6%}
.updates-table td{padding:13px 14px;border-bottom:1px solid var(--border-color);color:var(--text-main);font-size:11px;vertical-align:middle}
.updates-table tbody tr:last-child td{border-bottom:0}
.update-service-line{display:flex;align-items:center;min-width:0;font-weight:800;line-height:1.55}
.update-service-id{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:6px 10px;border:0;border-radius:8px;background:var(--main-color);color:var(--text-main);font-size:12px;font-weight:900;line-height:1;cursor:pointer}
.update-service-id:hover{color:var(--text-main);opacity:.9;text-decoration:underline;text-underline-offset:2px}
.update-separator{flex:0 0 auto;color:var(--text-light);white-space:pre}
.update-service-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.update-date-cell>span{display:inline-flex;align-items:center;gap:6px;color:var(--text-light);white-space:nowrap}
.update-date-cell i{color:var(--main-color);font-size:14px}
.update-detail{display:flex;align-items:center;gap:7px;min-width:0}
.update-detail>i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:var(--main-opacity);color:var(--main-color);font-size:14px}
.update-detail>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.update-detail>small{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:var(--main-opacity);color:var(--main-color);font-size:8px;font-weight:800}
.update-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.update-actions .btn-copy{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid var(--border-color);border-radius:9px;background:var(--card-bg);color:var(--main-color);cursor:pointer}
.update-actions .btn-copy.copied{border-color:#22c55e!important;background:#22c55e!important;color:#f9f7ff!important}
.update-actions .btn-copy.copied i{animation:orderIconConfirm .38s cubic-bezier(.22,1,.36,1)}
.update-actions .btn-copy i{font-size:14px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.update-actions .btn-copy:hover i{transform:rotate(-12deg) scale(1.06)}
.update-type-new .update-detail>i{color:#20c979;background:rgba(32,201,121,.11)}
.update-type-price .update-detail>i{color:#f4a619;background:rgba(244,166,25,.11)}
.update-type-min .update-detail>i,.update-type-max .update-detail>i{color:#2f80ed;background:rgba(47,128,237,.11)}
.update-type-status .update-detail>i{color:#a855f7;background:rgba(168,85,247,.11)}
.updates-empty-row .history-empty{border:0}
html.dark .updates-table-shell{background:#11151c}
html.dark .updates-table th{background:#0d121d}
@media (prefers-reduced-motion:reduce){.update-actions i{animation:none!important;transition:none!important;transform:none!important}}
@media (max-width:768px){
  .updates-page{gap:10px}
  .updates-table-shell{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .orders .updates-table{display:block;width:100%;overflow:visible}
  .orders .updates-table thead{display:none}
  .orders .updates-table tbody{display:grid;width:100%;grid-template-columns:minmax(0,1fr);gap:10px}
  .orders .updates-table .update-row{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border:1px solid var(--border-color);border-radius:14px;background:var(--secondary-color);box-shadow:0 8px 20px var(--shadow-color)}
  .updates-table .update-row td{display:block;padding:0;border:0}
  .updates-table .update-service-cell{grid-column:1/2;grid-row:1}
  .updates-table .update-actions-cell{grid-column:2/3;grid-row:1}
  .updates-table .update-detail-cell{grid-column:1/3;grid-row:2;padding-top:10px!important;border-top:1px solid var(--border-color)!important}
  .updates-table .update-date-cell{grid-column:1/3;grid-row:3}
  .update-service-line{align-items:flex-start}
  .update-service-name{overflow:visible;white-space:normal}
  .update-detail{align-items:flex-start}
  .update-detail>span{overflow:visible;white-space:normal;line-height:1.6}
  .update-detail>small{margin-inline-start:auto}
  .update-actions{justify-content:flex-end}
  .update-date-cell>span{font-size:9px}
  .updates-empty-row,.updates-empty-row td{display:block}
  html.dark .updates-table .update-row{background:#11151c}
}
@media (max-width:420px){.update-detail>small{display:none}.update-service-line{font-size:10px}.update-actions .btn-copy{width:30px;height:30px;flex-basis:30px}}
/* === End updates responsive table === */

/* === Add funds native payment select === */
.addfunds .card form select#method{appearance:auto;color-scheme:dark;accent-color:var(--main-color)}





html.dark .addfunds .card form select#method{background:#0d121d;color:#f9fafb;border-color:#2a3444}
html.dark .addfunds .card form select#method:focus{border-color:#8049eb;box-shadow:0 0 0 4px rgba(128,73,235,.16)}
html.dark .addfunds .card form select#method option{background:#0d121d;color:#f9fafb}
html.dark .addfunds .card form select#method option:checked{background:#8049eb;color:#f9fafb}
html.dark .addfunds .card form select#method option:disabled{color:#737b8c}
/* === End add funds native payment select === */

/* === New order page styles extracted from neworder.twig === */
.new-order .quick-support { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; width:100%; max-width:none; box-sizing:border-box; grid-column:1 / -1; justify-self:stretch; padding:12px 16px; margin:0 0 18px; border:1px solid var(--border-color, color-mix(in srgb,var(--nv-v2) 22%,transparent)); border-radius:14px; background:var(--secondary-color, #11101a); color:var(--text-main, #f9fafb); box-shadow:0 14px 34px var(--shadow-color, rgba(0,0,0,.32)); }
         .new-order .quick-support__intro { display:flex; align-items:center; gap:12px; }
         .new-order .quick-support__icon { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:50%; color:var(--main-color, #8049eb); background:var(--main-opacity, color-mix(in srgb,var(--nv-v) 14%,transparent)); font-size:20px; }
         .new-order .quick-support__copy { text-align:start; }
         .new-order .quick-support__copy h2 { margin:0 0 4px; font-size:14px; font-weight:700; color:inherit; }
         .new-order .quick-support__copy p { margin:0; font-size:12px; color:var(--text-light, #b7b3c8); }
         .new-order .quick-support__links { display:flex; flex-wrap:wrap; gap:12px; }
         .new-order .quick-support__link { display:flex; align-items:center; justify-content:center; gap:14px; min-width:130px; min-height:44px; padding:8px 16px; border:1px solid var(--border-color, color-mix(in srgb,var(--nv-v2) 22%,transparent)); border-radius:11px; color:var(--text-main, #f9fafb); text-decoration:none; font-size:12px; background:var(--card-bg, #171426); }
         .new-order .quick-support__link i { color:var(--main-color, #8049eb); font-size:21px; }
         .new-order .quick-support__link--whatsapp { border-color:rgba(34,197,94,.42); background:rgba(34,197,94,.10); }
         .new-order .quick-support__link--whatsapp i { color:#22c55e; }
         .new-order .quick-support__link--telegram { border-color:rgba(59,130,246,.42); background:rgba(59,130,246,.10); }
         .new-order .quick-support__link--telegram i { color:#3b82f6; }
         .new-order .quick-support__link:hover { color:var(--text-main, #f9fafb); text-decoration:none; filter:brightness(1.15); }
         .new-order .quick-support__link:focus-visible { outline:2px solid var(--main-color, #8049eb); outline-offset:3px; }
         .new-order .main-boxes .stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
         .new-order .main-boxes .stat-card { min-height:130px; padding:17px 18px; border-radius:12px; background:var(--secondary-color); border:1px solid var(--border-color); box-shadow:0 10px 26px var(--shadow-color); }
         .new-order .main-boxes .stat-card.primary { order:3; }
         .new-order .main-boxes .stat-card.orange { order:1; }
         .new-order .main-boxes .stat-card.success { order:2; }
         .new-order .main-boxes .stat-card.balance { order:4; border-color:var(--main-color); box-shadow:0 10px 28px var(--main-opacity); }
         .new-order .main-boxes .stat-card .card-bg { display:none; }
         .new-order .main-boxes .card-content { justify-content:space-between; gap:8px; }
         .new-order .main-boxes .card-header { margin:0; }
         .new-order .main-boxes .card-label { font-size:12px; font-weight:700; text-transform:none; color:var(--text-light); }
         .new-order .main-boxes .icon-box,
         .new-order .main-boxes .icon-btn-sm { width:42px; height:42px; border-radius:10px; font-size:18px; }
         .new-order .main-boxes .icon-box i { font-size:18px; color:inherit; }
         .new-order .main-boxes .icon-box.primary { color:#9b6cff; background:color-mix(in srgb,var(--nv-v) 14%,transparent); }
         .new-order .main-boxes .icon-box.orange { color:#f5b82e; background:rgba(245,184,46,.13); }
         .new-order .main-boxes .icon-box.success { color:#22c987; background:rgba(34,201,135,.13); }
         .new-order .main-boxes .icon-btn-sm { border:0; background:transparent; color:var(--text-light); box-shadow:none; }
         .new-order .main-boxes .icon-btn-sm:hover { background:transparent; color:var(--main-color); }
         .new-order .main-boxes .card-value,
         .new-order .main-boxes .balance-row h3 { margin:0; font-size:23px; line-height:1.15; font-weight:800; color:var(--text-main); }
         .new-order .main-boxes .card-value.small { font-size:18px; }
         .new-order .main-boxes .card-meta { gap:7px; font-size:11px; }
         .new-order .main-boxes .card-meta.primary { color:#20c98b; }
         .new-order .main-boxes .level-row,
         .new-order .main-boxes .balance-row { margin:0; align-items:center; justify-content:space-between; }
         .new-order .main-boxes .level-badge { padding:4px 9px; border:1px solid rgba(217,119,6,.42); border-radius:999px; background:rgba(245,158,11,.12); color:#b45309; box-shadow:none; }
         .new-order .main-boxes .progress { height:8px; background:var(--card-bg); border:1px solid var(--border-color); }
         .new-order .main-boxes .add-balance-btn { margin-top:0; padding:7px 10px; border:0; border-radius:7px; color:#f9f7ff; background:linear-gradient(135deg,var(--nv-v2) 0%,#ec4899 100%); box-shadow:0 6px 16px color-mix(in srgb,var(--nv-v) 24%,transparent); }
         .new-order .main-boxes .add-balance-btn:hover { color:#f9f7ff; background:linear-gradient(135deg,#9333ea 0%,#db2777 100%); filter:none; }
         html.dark .new-order .main-boxes .level-badge { border-color:transparent!important; background:var(--main-color)!important; color:#f9f7ff!important; box-shadow:0 4px 12px var(--main-opacity)!important; }
         html.dark .new-order .main-boxes .add-balance-btn { background:var(--main-color); box-shadow:0 6px 16px var(--main-opacity); }
         html.dark .new-order .main-boxes .add-balance-btn:hover { background:var(--main-color); filter:brightness(1.08); }
         .new-order .platform-filter { width:100%; margin-bottom:16px; }
         .new-order .platform-filter .filter-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:100%; margin:0; padding:0; list-style:none; }
         .new-order .platform-filter .brand-category { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:8px 44px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); color:var(--text-main); font-size:12px; font-weight:700; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
         .new-order .platform-filter .brand-category:hover { border-color:var(--main-color); color:var(--main-color); transform:translateY(-1px); }
         .new-order .platform-filter .brand-category.active { border-color:transparent; background:linear-gradient(135deg,var(--nv-v2) 0%,#ec4899 100%); color:#f9f7ff; }
         html.dark .new-order .platform-filter .brand-category.active { border-color:var(--main-color); background:var(--main-color); color:#f9f7ff; box-shadow:0 4px 15px var(--main-opacity); }
         .new-order .platform-filter .filter-icon { position:absolute; inset-inline-start:14px; top:50%; translate:0 -50%; display:grid; place-items:center; width:22px; height:22px; }
         .new-order .platform-filter .filter-icon img { display:block; width:20px; height:20px; object-fit:contain; }
         .new-order .platform-filter .filter-icon i { font-size:18px; }
         .new-order .platform-filter .filter-text { display:block; width:100%; line-height:1; text-align:center; }
         @media(max-width:1100px) {
            .new-order .main-boxes .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .new-order .platform-filter .filter-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
         }
         @media(max-width:700px) {
            .new-order .main-boxes .stats-grid { grid-template-columns:1fr; gap:10px; }
            .new-order .main-boxes .stat-card { min-height:122px; }
            .new-order .quick-support { flex-direction:column; align-items:stretch; gap:14px; }
            .new-order .quick-support__intro { justify-content:center; }
            .new-order .quick-support__icon { display:none; }
            .new-order .quick-support__copy { width:100%; text-align:center; }
            .new-order .quick-support__links { gap:8px; }
            .new-order .quick-support__link { flex:1 1 100px; min-width:0; padding:8px; gap:8px; }
            .new-order .platform-filter .filter-list { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
            .new-order .platform-filter .brand-category { min-height:44px; padding:7px; }
            .new-order .platform-filter .filter-icon { position:static; translate:none; }
            .new-order .platform-filter .filter-text { display:none; }
         }


/* =====================================================================
   NOVA THEME  ·  inner panel layer
   Violet var(--nv-v)  +  Flame var(--nv-f)  on pure white
   (appended after the original rules – same class names, new skin)
===================================================================== */
:root{
  --nv-accent:var(--nv-v);
  --nv-motion:var(--nv-m);
  --nv-violet:var(--nv-v); --nv-violet-2:var(--nv-v2); --nv-flame:var(--nv-f); --nv-flame-2:var(--nv-f2);
  --nv-grad:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 55%,var(--nv-v2) 100%);
  --nv-grad-hot:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 48%,var(--nv-f) 125%);
  --nv-flame-grad:linear-gradient(135deg,var(--nv-f),var(--nv-f2));
  --main-color:var(--nv-v);
  --main-glow:color-mix(in srgb,var(--nv-v) 35%,transparent);
  --main-opacity:color-mix(in srgb,var(--nv-v) 10%,transparent);
  --secondary-color:color-mix(in srgb,var(--nv-v) 5%,transparent);
  --bg-color:#ffffff;
  --card-bg:#ffffff;
  --card-solid:#ffffff;
  --border-color:color-mix(in srgb,var(--nv-v) 36%,transparent);
  --text-main:#0B0A1F;
  --text-light:#58557a;
  --text-muted:#8a87a8;
  --place-color:#8a87a8;
  --shadow-color:rgba(60,30,180,.10);
  --td-color:color-mix(in srgb,var(--nv-v) 4%,transparent);
  --header-bg:rgba(255,255,255,.78);
  --section-bg:color-mix(in srgb,var(--nv-v) 4%,transparent);
  --light-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);
  --card-hover-shadow:color-mix(in srgb,var(--nv-v) 22%,transparent);
  --nv-edge:linear-gradient(color-mix(in srgb,var(--nv-v) 60%,transparent),color-mix(in srgb,var(--nv-v) 60%,transparent));
  --nv-edge-hover:linear-gradient(var(--nv-v),var(--nv-v));
  --nv-shadow:0 1px 2px rgba(20,10,80,.04),0 12px 32px -8px rgba(70,35,200,.14);
  --nv-shadow-hover:0 2px 4px rgba(20,10,80,.05),0 26px 50px -12px color-mix(in srgb,var(--nv-v) 34%,transparent);
  --nv-ok:#0f9d6e; --nv-warn:#d98a00; --nv-bad:#e5334b;
  --nv-radius:22px;
}
html.dark{
  --nv-accent:var(--nv-v);
  --nv-motion:var(--nv-m);
  --main-color:var(--nv-v);
  --main-glow:color-mix(in srgb,var(--nv-v) 30%,transparent);
  --main-opacity:color-mix(in srgb,var(--nv-v) 18%,transparent);
  --secondary-color:color-mix(in srgb,var(--nv-v) 9%,transparent);
  --bg-color:#050407;
  --card-bg:#0d0818;
  --card-solid:#0d0818;
  --border-color:color-mix(in srgb,var(--nv-v) 30%,transparent);
  --text-main:#f4f4f6;
  --text-light:#a8a8b3;
  --text-muted:#80808c;
  --place-color:#80808c;
  --shadow-color:rgba(0,0,0,.5);
  --td-color:color-mix(in srgb,var(--nv-v) 7%,transparent);
  --header-bg:rgba(5,4,7,.82);
  --section-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);
  --light-bg:color-mix(in srgb,var(--nv-v) 8%,transparent);
  --card-hover-shadow:rgba(0,0,0,.7);
  --nv-edge:linear-gradient(color-mix(in srgb,var(--nv-v) 62%,transparent),color-mix(in srgb,var(--nv-v) 62%,transparent));
  --nv-edge-hover:linear-gradient(var(--nv-v),var(--nv-v));
  --nv-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -8px rgba(0,0,0,.6);
  --nv-shadow-hover:0 22px 44px -14px rgba(0,0,0,.8);
}

html{background:var(--bg-color);scroll-behavior:smooth}
body{background:transparent;color:var(--text-main);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--nv-violet);color:#fff}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--nv-v) 35%,transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--nv-violet),var(--nv-flame));border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ambient grid under everything (canvas sits above this) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--nv-v) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--nv-v) 10%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 25%,transparent 78%);
}
html.dark body::before{background-image:linear-gradient(rgba(190,175,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(190,175,255,.06) 1px,transparent 1px)}

.main-wrapper,.main-wrapper .page-content{background:transparent!important}

/* ---------------------------------------------------------------- header */
.page-header{
  background:var(--header-bg)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border-color)!important;
  box-shadow:0 10px 30px -18px rgba(70,35,200,.28)!important;
}
.page-header::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--nv-grad-hot);opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.page-header .header-left .subtitle{letter-spacing:.28em;color:var(--nv-flame);font-weight:800;text-transform:uppercase}
.page-header .header-left .header-title h1{font-size:19px;font-weight:800;letter-spacing:-.01em;
  background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;width:fit-content}
.page-header .header-left .icon-btn,.page-header .header-right .icon-btn{
  background:var(--card-solid)!important;border:1px solid var(--border-color)!important;border-radius:14px!important;color:var(--text-main);
  box-shadow:0 4px 12px -6px rgba(70,35,200,.25)}
.page-header .header-right .icon-btn:hover{border-color:var(--nv-violet)!important;color:var(--nv-violet);transform:translateY(-2px);box-shadow:0 10px 20px -8px color-mix(in srgb,var(--nv-v) 40%,transparent)}
.page-header .header-right .theme-btn{background:var(--main-opacity)!important;color:var(--nv-violet)!important;border-radius:14px!important}
.page-header .header-right .theme-btn:hover{background:var(--nv-grad)!important;color:#fff!important;box-shadow:0 10px 22px -8px color-mix(in srgb,var(--nv-v) 55%,transparent)}
.page-header .header-right .balance-box{
  background:var(--card-solid)!important;border:1px solid var(--border-color)!important;border-radius:999px!important;height:44px!important;
  box-shadow:0 6px 16px -8px rgba(70,35,200,.35);transition:.25s}
.page-header .header-right .balance-box:hover{border-color:var(--nv-violet)!important;transform:translateY(-1px)}
.page-header .header-right .wallet-icon{background:var(--nv-grad-hot)!important;color:#fff!important;border-radius:50%!important;box-shadow:0 6px 14px -4px color-mix(in srgb,var(--nv-f) 55%,transparent)}
.page-header .header-right .balance-box strong{font-weight:800;letter-spacing:-.01em}
.page-header .header-right .logout-btn{background:var(--nv-flame-grad)!important;color:#fff!important;border:0!important}
.page-header .header-right .dropdown .dropdown-menu{
  background:var(--card-solid)!important;border:1px solid var(--border-color);border-radius:18px!important;
  box-shadow:0 30px 60px -20px rgba(60,30,180,.45)!important}
.page-header .header-right .dropdown .dropdown-menu a:hover{background:var(--main-opacity)!important;color:var(--nv-violet)}
.notification-btn .badge,.notification-btn span.badge{background:var(--nv-flame)!important;color:#fff!important;box-shadow:0 0 0 3px var(--card-solid)}

/* --------------------------------------------------------------- sidebar */
.sidebar .sidebar-header{
  background:var(--header-bg)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border-color)!important;border-inline:0!important}
.sidebar .sidebar-header .brand{
  font-weight:900;letter-spacing:-.03em;
  background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sidebar .sidebar-header .sidebar-toggler span{background:var(--nv-violet)}
.sidebar .sidebar-body{
  background:linear-gradient(180deg,var(--card-solid),var(--card-solid))!important;
  border-inline:0!important;border-inline-end:1px solid var(--border-color)!important;box-shadow:12px 0 40px -24px rgba(70,35,200,.35)!important}
.sidebar-body .user-box{border-top:0!important;padding:1.25rem 1rem .75rem!important}
.sidebar-body .user-box .user-avatar .glow{background:var(--nv-grad-hot)!important;filter:blur(18px);opacity:.55}
.sidebar-body .user-box .user-border{border:3px solid var(--card-solid)!important;box-shadow:0 0 0 2px var(--nv-violet),0 14px 30px -10px color-mix(in srgb,var(--nv-v) 55%,transparent)!important}
.sidebar-body .user-box .user-border>p{background:var(--nv-grad-hot)!important;color:#fff!important}
.sidebar-body .user-box .level{background:var(--main-opacity)!important;color:var(--nv-violet)!important;border:1px solid color-mix(in srgb,var(--nv-v) 25%,transparent);letter-spacing:.02em}
.sidebar-body .user-box .user-avatar .go-arrow{background:var(--card-solid)!important;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--nv-v) 50%,transparent)!important}
.sidebar-body .user-box .user-avatar:hover .go-arrow{background:var(--nv-violet)!important;color:#fff!important}
.sidebar-body .user-box .verified-badge{background:var(--nv-grad)!important;color:#fff!important;border:0!important}

.sidebar-menu .menu-side{border:1px solid var(--border-color)!important;border-radius:18px!important;overflow:hidden;background:var(--secondary-color)}
.sidebar-menu .menu-side .side-title{background:transparent!important;color:var(--text-main);font-weight:800}
.sidebar-menu .menu-title{color:var(--text-muted)!important;letter-spacing:.2em;text-transform:uppercase;font-weight:800}

.sidebar-menu .nav-menu li>a,.sidebar-menu-flat>.nav-menu>li>a{
  position:relative;border-radius:14px!important;color:var(--text-light)!important;font-weight:700;
  transition:background .25s,color .25s,transform .25s,box-shadow .25s!important}
.sidebar-menu .nav-menu li>a .nav-icon,.sidebar-menu .nav-menu li>a i,.sidebar-menu .nav-menu li>a svg{transition:transform .3s cubic-bezier(.3,1.6,.5,1),color .25s}
.sidebar-menu .nav-menu li>a:hover,.sidebar-menu-flat>.nav-menu>li>a:hover{
  background:var(--main-opacity)!important;color:var(--nv-violet)!important;transform:translateX(-3px)}
html[dir=ltr] .sidebar-menu .nav-menu li>a:hover,html[lang=en] .sidebar-menu .nav-menu li>a:hover{transform:translateX(3px)}
.sidebar-menu .nav-menu li>a:hover .nav-icon,.sidebar-menu .nav-menu li>a:hover i{transform:scale(1.18) rotate(-6deg)}
.sidebar-menu .nav-menu li>a.active,.sidebar-menu .nav-menu li.active>a,.sidebar-menu .nav-menu li>a[aria-current],
.sidebar-menu-flat>.nav-menu>li>a.active,.sidebar-menu-flat>.nav-menu>li.active>a{
  background:var(--nv-grad-hot)!important;color:#fff!important;
  box-shadow:0 14px 26px -10px color-mix(in srgb,var(--nv-v) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important}
.sidebar-menu .nav-menu li>a.active .nav-icon,.sidebar-menu .nav-menu li.active>a .nav-icon{color:#fff!important}
.sidebar-logout-btn{border-radius:14px!important}
.sidebar-logout-btn:hover{background:rgba(229,51,75,.1)!important;color:var(--nv-bad)!important;border-color:rgba(229,51,75,.3)!important}
.sidebar-music-player{background:var(--secondary-color)!important;border-radius:18px!important}
.sidebar-music-player .music-play{background:var(--nv-grad-hot)!important;color:#fff!important;box-shadow:0 10px 20px -8px color-mix(in srgb,var(--nv-v) 70%,transparent)!important}
.sidebar-music-player .music-cover{background:var(--main-opacity)!important}
.sidebar-open .main-wrapper::before{background:rgba(11,10,31,.35)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ----------------------------------------------------------------- cards */
.card,.store-form,.massorder-card,.bonus-card,.table-responsive,.modal-box,.welcome-box,.levels-table-wrapper,
.levels-top-stats,.levels-alert,.uploader-wrapper,.dns-box,.instruction,.instructions,.deposit-steps,.updates-table-shell,
.ticketview,.account,.api,.affiliates,.addfunds,.childpanel-create{
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge) border-box!important;
  border:1px solid transparent!important;border-radius:var(--nv-radius)!important;box-shadow:var(--nv-shadow)!important;
  color:var(--text-main)}
.table-responsive{overflow-x:auto}

.stat-card,.order-card,.refill-card,.refund-card,.subscription-card,.drip-feed-card,.levels-mini-card,.method-card,.feat-card,.category-box,.step-item,.main-boxes .stat-card,.new-order .main-boxes .stat-card{
  position:relative;overflow:hidden;
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge) border-box!important;
  border:1px solid transparent!important;border-radius:var(--nv-radius)!important;box-shadow:var(--nv-shadow)!important;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s,background .35s}
.stat-card:hover,.order-card:hover,.refill-card:hover,.refund-card:hover,.subscription-card:hover,.drip-feed-card:hover,.levels-mini-card:hover,.method-card:hover,.feat-card:hover,.category-box:hover{
  transform:translateY(-5px);box-shadow:var(--nv-shadow-hover)!important;
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge-hover) border-box!important}
.stat-card .card-bg{display:block;position:absolute;inset:auto auto -40% -20%;width:70%;height:90%;
  background:radial-gradient(circle,color-mix(in srgb,var(--nv-v) 20%,transparent),transparent 68%);filter:blur(6px);pointer-events:none;opacity:1}
.stat-card.orange .card-bg{background:radial-gradient(circle,color-mix(in srgb,var(--nv-f) 22%,transparent),transparent 68%)}
.stat-card .card-label{color:var(--text-light)!important;font-weight:700;letter-spacing:.02em}
.stat-card .card-value,.card-value{font-weight:900!important;letter-spacing:-.02em;
  background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat-card .icon-box,.main-boxes .icon-box{border-radius:16px!important;border:0!important;box-shadow:0 10px 20px -10px currentColor}
.stat-card .icon-box.primary,.main-boxes .icon-box.primary{background:var(--main-opacity)!important;color:var(--nv-violet)!important}
.stat-card .icon-box.orange,.main-boxes .icon-box.orange{background:color-mix(in srgb,var(--nv-f) 12%,transparent)!important;color:var(--nv-flame)!important}
.stat-card .icon-box.success,.main-boxes .icon-box.success{background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 14%,transparent),color-mix(in srgb,var(--nv-f) 14%,transparent))!important;color:var(--nv-violet)!important}
.stat-card .card-meta.primary,.main-boxes .card-meta.primary{color:var(--nv-ok)!important;font-weight:700}
/* featured balance tile = full gradient */
.stat-card.balance,.new-order .main-boxes .stat-card.balance{
  background:var(--nv-grad-hot)!important;border:0!important;color:#fff!important;
  box-shadow:0 26px 50px -18px color-mix(in srgb,var(--nv-v) 70%,transparent)!important}
.stat-card.balance .card-label,.stat-card.balance .card-meta{color:rgba(255,255,255,.82)!important}
.stat-card.balance .card-value,.stat-card.balance h3,.stat-card.balance .balance-row h3{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
.stat-card.balance .card-bg{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%)}
.stat-card.balance .icon-box,.stat-card.balance .icon-btn-sm{background:rgba(255,255,255,.2)!important;color:#fff!important}
.stat-card.balance .add-balance-btn,.new-order .main-boxes .add-balance-btn{background:#fff!important;color:var(--nv-violet)!important;font-weight:800;box-shadow:0 10px 20px -10px rgba(0,0,0,.4)!important}
.stat-card .level-badge,.new-order .main-boxes .level-badge{background:var(--main-opacity)!important;color:var(--nv-violet)!important;border:1px solid color-mix(in srgb,var(--nv-v) 30%,transparent)!important}
.card-header,.card-label{color:inherit}
.welcome-box{background:var(--nv-grad-hot)!important;border:0!important;color:#fff!important;position:relative;overflow:hidden}
.welcome-box *{color:inherit}

/* ------------------------------------------------------ progress / levels */
.progress{background:var(--main-opacity)!important;border:0!important;border-radius:99px!important;overflow:hidden}
.progress-bar,.progress .progress-bar{background:linear-gradient(90deg,var(--nv-violet),var(--nv-v2),var(--nv-flame))!important;border-radius:99px!important}
.level-badge{background:var(--main-opacity)!important;color:var(--nv-violet)!important}

/* --------------------------------------------------------------- buttons */
.btn-primary,.main-btn,.submit-btn,.btn-order-now,.btn-pay,.store-submit,.add-balance-btn,.btn-search,.new-order-search-button,.quick-btn,.btn-details,.copy-btn.primary{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--nv-grad-hot)!important;background-size:140% 100%;background-position:0 0;color:#fff!important;border:0!important;
  border-radius:14px!important;font-weight:800;letter-spacing:.01em;
  box-shadow:0 14px 26px -12px color-mix(in srgb,var(--nv-v) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s,background-position .5s!important}
.btn-primary::after,.main-btn::after,.submit-btn::after,.btn-order-now::after,.btn-pay::after,.store-submit::after{
  content:"";position:absolute;top:0;bottom:0;width:60%;inset-inline-start:-80%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:inset-inline-start .6s}
.btn-primary:hover,.main-btn:hover,.submit-btn:hover,.btn-order-now:hover,.btn-pay:hover,.store-submit:hover,.add-balance-btn:hover,.btn-search:hover,.new-order-search-button:hover,.quick-btn:hover,.btn-details:hover{
  transform:translateY(-3px) scale(1.02);background-position:100% 0!important;color:#fff!important;filter:none!important;
  box-shadow:0 22px 34px -12px color-mix(in srgb,var(--nv-f) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.4)!important}
.btn-primary:hover::after,.main-btn:hover::after,.submit-btn:hover::after,.btn-order-now:hover::after,.btn-pay:hover::after,.store-submit:hover::after{inset-inline-start:130%}
.btn-primary:active,.main-btn:active,.submit-btn:active,.btn-order-now:active{transform:translateY(0) scale(.98)}
.btn-outline,.btn-default,.btn-link,.btn-copy,.copy-btn,.filter-button,.back-btn,.btn-fav{
  background:var(--card-solid)!important;color:var(--nv-violet)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 28%,transparent)!important;border-radius:14px!important;font-weight:700;
  transition:all .25s!important}
.btn-outline:hover,.btn-default:hover,.btn-copy:hover,.copy-btn:hover,.filter-button:hover,.back-btn:hover{
  background:var(--main-opacity)!important;border-color:var(--nv-violet)!important;transform:translateY(-2px);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--nv-v) 55%,transparent)}
.btn-fav.favorite-active,.favorite-active{color:var(--nv-flame)!important;border-color:var(--nv-flame)!important}
.btn-sm{border-radius:10px!important}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--nv-flame);outline-offset:3px}

/* ----------------------------------------------------------------- forms */
.form-label,.control-label,.form-group__label-title{color:var(--text-main);font-weight:800;font-size:13px;letter-spacing:.01em}
.form-control,.form-select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),textarea,select,
.select2-container .select2-selection--single,.select2-container--default .select2-selection--single{
  background-color:var(--card-solid)!important;color:var(--text-main)!important;
  border:1.5px solid var(--border-color)!important;border-radius:14px!important;
  transition:border-color .2s,box-shadow .25s,background-color .2s}
.form-control:hover,.form-select:hover,textarea:hover,select:hover{border-color:color-mix(in srgb,var(--nv-v) 40%,transparent)!important}
.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus,
.select2-container--open .select2-selection--single,.select2-container--focus .select2-selection--single{
  border-color:var(--nv-violet)!important;outline:0!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--nv-v) 14%,transparent),0 10px 24px -12px color-mix(in srgb,var(--nv-v) 55%,transparent)!important}
::placeholder{color:var(--place-color)!important;opacity:1}
.form-control:disabled,.form-control[readonly]{background:var(--secondary-color)!important;opacity:.85}
.help-block,.help-text,.input-error{font-size:12px}
.input-error{color:var(--nv-bad)}
.input-group-text,.input-group-btn .btn{background:var(--main-opacity)!important;border:1.5px solid var(--border-color)!important;color:var(--nv-violet)!important}
.select2-dropdown,.select2-container--open .select2-dropdown--below{
  background:var(--card-solid)!important;border:1px solid var(--border-color)!important;border-radius:16px!important;
  box-shadow:0 30px 60px -20px rgba(60,30,180,.5)!important;overflow:hidden;color:var(--text-main)}
.select2-container--default .select2-results__option--highlighted,.select2-results__option--highlighted{background:var(--nv-grad)!important;color:#fff!important}
.select2-search__field{border-radius:12px!important}
.custom-checkbox .checkmark,.checkmark{border-radius:7px!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 40%,transparent)!important;background:var(--card-solid)!important}
input:checked~.checkmark,.custom-checkbox input:checked+.checkmark{background:var(--nv-grad)!important;border-color:transparent!important}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--nv-violet)}
.switch input:checked+.slider,.switch input:checked+span{background:var(--nv-grad-hot)!important}

/* ---------------------------------------------------------------- tables */
.table,.table-responsive table{border-collapse:separate;border-spacing:0}
.table thead th,.table-responsive table thead th,.th-head{
  background:linear-gradient(180deg,var(--main-opacity),transparent)!important;color:var(--nv-violet)!important;
  font-weight:900;letter-spacing:.04em;font-size:12px;text-transform:uppercase;border-bottom:1.5px solid color-mix(in srgb,var(--nv-v) 18%,transparent)!important}
.table tbody td,.table-responsive table tbody td{border-bottom:1px solid var(--border-color)!important;color:var(--text-main);opacity:1!important;transition:background .2s}
.table tbody tr,.table-responsive table tbody tr{transition:background .2s,transform .25s}
.table tbody tr:hover td,.table-responsive table tbody tr:hover td{background:var(--td-color)!important}
.table tbody tr:last-child td{border-bottom:0!important}
.td_link,.break-link,.brief-link,.modal-link,.order-link,.refund-order-link,.drip-link,.refill-link{color:var(--nv-violet)!important;font-weight:700}
.td_link:hover,.break-link:hover,.brief-link:hover{color:var(--nv-flame)!important}
.td-id-copy-wrapper{border-radius:10px;background:var(--main-opacity)}
.service-id,.id-r,.service-value,.price-value{font-weight:800;color:var(--nv-violet)}
.price-value,.money,.amount{font-feature-settings:"tnum"}
.pagination a,.pagination li a,.pagination span,.rtl-pagination a{border-radius:12px!important;border:1px solid var(--border-color)!important;background:var(--card-solid)!important;color:var(--text-main)!important;transition:.2s}
.pagination a:hover,.pagination li a:hover{border-color:var(--nv-violet)!important;color:var(--nv-violet)!important;transform:translateY(-2px)}
.pagination .active a,.pagination a.active,.pagination li.active a,.pagination .active span{background:var(--nv-grad-hot)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 18px -8px color-mix(in srgb,var(--nv-v) 70%,transparent)}

/* ------------------------------------------------------- badges & status */
.badge,.badge-soft,.status-badge,.td-badge,[class*="badge-"],[class*="-status-"],.status,.drip-status,.refill-status,.refund-status,.subscription-status,.order-card-status{
  border-radius:999px!important;font-weight:800;letter-spacing:.01em;border:1px solid transparent}
.badge-complete,.status-completed,.status-success,.status-paid,.drip-status-completed,.refill-status-completed,.subscription-status-completed,.subscription-status-active,.drip-status-active,.success{
  background:rgba(15,157,110,.12);color:var(--nv-ok);border-color:rgba(15,157,110,.25)}
.badge-pending,.badge-processing,.status-pending,.status-waiting,.status-inprogress,.status-processing,.refill-status-pending,.refill-status-inprogress,.subscription-status-paused{
  background:var(--main-opacity);color:var(--nv-violet);border-color:color-mix(in srgb,var(--nv-v) 25%,transparent)}
.badge-partial,.status-partial,.refund-status-partial,.alert-warning{background:color-mix(in srgb,var(--nv-f) 12%,transparent);color:var(--nv-f);border-color:color-mix(in srgb,var(--nv-f) 28%,transparent)}
.badge-canceled,.status-canceled,.status-failed,.status-rejected,.drip-status-canceled,.refill-status-error,.refill-status-rejected,.refund-status-canceled,.subscription-status-canceled,.subscription-status-expired,.danger{
  background:rgba(229,51,75,.1);color:var(--nv-bad);border-color:rgba(229,51,75,.25)}
.status-dot{box-shadow:0 0 0 4px currentColor;box-shadow:0 0 12px currentColor}
.alert{border-radius:18px!important;border:1px solid var(--border-color);border-inline-start-width:5px;box-shadow:var(--nv-shadow)}
.alert-success{border-inline-start-color:var(--nv-ok)!important}
.alert-danger{border-inline-start-color:var(--nv-bad)!important}
.alert-warning{border-inline-start-color:var(--nv-flame)!important}
.neworder-success{background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 8%,transparent),color-mix(in srgb,var(--nv-f) 8%,transparent))!important}

/* ------------------------------------------------------ tabs / filters / nav */
.tab-btn,.brand-category,.mode-item,.filter-btn,.nav-pills a,.levels-tab,.order-nav-item,.step-label{
  border-radius:14px!important;background:var(--card-solid)!important;border:1.5px solid var(--border-color)!important;color:var(--text-main)!important;font-weight:800;transition:.25s!important}
.tab-btn:hover,.brand-category:hover,.mode-item:hover,.order-nav-item:hover{border-color:var(--nv-violet)!important;color:var(--nv-violet)!important;transform:translateY(-2px);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--nv-v) 55%,transparent)}
.tab-btn.active,.brand-category.active,.mode-item.active,.nav-pills .active,.nav-pills a.active,.levels-tab.active,.order-nav-item.active,.new-order .platform-filter .brand-category.active{
  background:var(--nv-grad-hot)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 14px 24px -10px color-mix(in srgb,var(--nv-v) 70%,transparent)}
.filter-wrapper,.filter-row,.services-filter{gap:10px}
.method-card.active,.method-card.selected,.method-item.active,.method.active,.method-select.active{
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-grad-hot) border-box!important;box-shadow:0 20px 40px -16px color-mix(in srgb,var(--nv-v) 55%,transparent)!important}
.method-check{color:var(--nv-violet)}
.step-number,.step-badge{background:var(--nv-grad-hot)!important;color:#fff!important;box-shadow:0 12px 22px -8px color-mix(in srgb,var(--nv-v) 70%,transparent);border-radius:16px}
.step-highlight{color:var(--nv-flame)}
.accordion-item{background:var(--card-solid);border:1px solid var(--border-color);border-radius:18px!important;overflow:hidden;box-shadow:var(--nv-shadow);margin-bottom:12px}
.accordion-header{font-weight:800}
.accordion-item.active{border-color:var(--nv-violet)}
.accordion-item.active .accordion-header{color:var(--nv-violet)}

/* ----------------------------------------------------------- modals etc. */
.modal-overlay,.overlay{background:rgba(11,10,31,.45)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal-box{box-shadow:0 50px 90px -30px rgba(40,20,160,.6)!important}
.modal-close,.close{border-radius:50%!important;transition:.25s}
.modal-close:hover,.close:hover{background:var(--nv-flame)!important;color:#fff!important;transform:rotate(90deg)}
.tooltip-inner{background:var(--text-main)!important;color:var(--bg-color)!important;border-radius:10px!important;font-weight:700}
.dropdown-menu{background:var(--card-solid);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 30px 60px -22px rgba(60,30,180,.5)}
.dropdown-item:hover{background:var(--main-opacity);color:var(--nv-violet)}
.quick-support__link{border-radius:14px!important;transition:.25s}
.quick-support__link:hover{transform:translateY(-3px);filter:none!important;box-shadow:0 14px 26px -12px color-mix(in srgb,var(--nv-v) 50%,transparent)}
.quick-support__icon{background:var(--nv-grad-hot)!important;color:#fff!important}
.balance-hidden{filter:blur(7px)}
h1,h2,h3,.page-title,.title{letter-spacing:-.015em}
.page-title,.section .title{font-weight:900}
.copied{color:var(--nv-ok)!important}
.verified-badge{background:var(--nv-grad)!important;color:#fff!important}
.bonus-tier{border-radius:16px!important;border:1px dashed color-mix(in srgb,var(--nv-v) 40%,transparent)!important;background:var(--main-opacity)!important}
.bonus-tier-pct{color:var(--nv-flame)!important;font-weight:900}

/* floating chat bot accent */
html body .sv-bot4{--sv-accent:var(--nv-v);--sv-accent2:var(--nv-f)}

/* --------------------------------------------------------------- motion */
@keyframes novaSlide{to{background-position:200% 0}}
@keyframes novaFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,24px)}}
@keyframes novaIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.page-content>div>*,.page-content .container>*,.main-boxes>*,.stats-grid>*,.orders-grid>*,.refill-grid>*,.refunds-grid>*,.subscriptions-grid>*,.drip-feed-grid>*,.table-responsive,.store-form{
  animation:novaIn .6s cubic-bezier(.2,.8,.2,1) both}
.stats-grid>*:nth-child(2),.orders-grid>*:nth-child(2){animation-delay:.07s}
.stats-grid>*:nth-child(3),.orders-grid>*:nth-child(3){animation-delay:.14s}
.stats-grid>*:nth-child(4),.orders-grid>*:nth-child(4){animation-delay:.21s}
.stats-grid>*:nth-child(5),.orders-grid>*:nth-child(5){animation-delay:.28s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:991px){
  .page-header{padding:0 14px}
  .card,.store-form,.table-responsive{border-radius:18px!important}
}

/* stat cards: soft tint instead of the template's big solid circles */
.stat-card .card-bg,.stat-card.primary .card-bg,.stat-card.orange .card-bg,.stat-card.success .card-bg{
  display:block!important;background:radial-gradient(circle,color-mix(in srgb,var(--nv-v) 20%,transparent),transparent 70%)!important;
  width:70%!important;height:90%!important;inset:auto auto -45% -20%!important;border-radius:50%!important;filter:none!important;opacity:1!important;transform:none!important}
.stat-card.orange .card-bg{background:radial-gradient(circle,color-mix(in srgb,var(--nv-f) 22%,transparent),transparent 70%)!important}
.stat-card.balance .card-bg{background:radial-gradient(circle,rgba(255,255,255,.26),transparent 70%)!important}
/* NOVA colour tokens - every theme = mauve + one 3rd colour
   white        : white + mauve + orange (first palette)
   black pink   : black + dark mauve + pink
   black orange : black + dark mauve + dark orange                           */
:root{
  --nv-v:#5B2EFF;      /* mauve / violet */
  --nv-v2:#9A45FF;     /* mid violet (gradients) */
  --nv-f:#FF5A36;      /* orange (first one) */
  --nv-f2:#FF8A3D;
  --nv-m:var(--nv-v);  /* colour of moving things */
}
html.dark{
  --nv-v:#6D28D9;      /* dark mauve */
  --nv-v2:#8B4DE8;
  --nv-f:#EC4899;      /* pink */
  --nv-f2:#F472B6;
  --nv-m:var(--nv-f);
}
html.dark.nv-orange{--nv-f:#F97316;--nv-f2:#FB923C}   /* orange */
html.dark.nv-hw{--nv-v:#7C2DDA;--nv-v2:#A855F7;--nv-f:#FF7A00;--nv-f2:#FFB347;--bg-color:#06030a;--card-bg:#0e0714;--card-solid:#0e0714;--border-color:rgba(168,85,247,.5)}
html.dark.nv-amber{--nv-v:#F97316;--nv-v2:#FB923C;--nv-f:#7C2DDA;--nv-f2:#A855F7}   /* orange first */
html.dark.nv-xm{--nv-v:#D42A3C;--nv-v2:#F0525F;--nv-f:#1FB463;--nv-f2:#FFD166;--bg-color:#03080c;--card-bg:#08131a;--card-solid:#08131a;--border-color:rgba(240,82,95,.45)}   /* christmas */


/* =====================================================================
   NOVA · colour tokens (the only place colours are decided)
   white theme : white + violet only (no orange)
   black theme : black + dark mauve + light orange
===================================================================== */
/* skin for the notifications popup (#cp-overlay) already in the template */
html body #cp-overlay{
  --cp-bg:#ffffff;--cp-card:#f6f3ff;--cp-border:color-mix(in srgb,var(--nv-v) 22%,transparent);--cp-text:#0B0A1F;--cp-muted:#58557a;
  --cp-grad:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 100%);
  background:rgba(11,10,31,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.dark body #cp-overlay{--cp-bg:#0d0818;--cp-card:#150f26;--cp-border:rgba(255,255,255,.14);--cp-text:#f4f4f6;--cp-muted:#a8a8b3}
html body #cp-box{
  background:linear-gradient(var(--cp-bg),var(--cp-bg)) padding-box,linear-gradient(var(--nv-v),var(--nv-v)) border-box;
  border:1.5px solid transparent;border-radius:28px;box-shadow:0 60px 100px -30px rgba(60,30,180,.65);color:var(--cp-text)}
html body #cp-bell{border-radius:19px;animation:cpBellN 3s ease-in-out infinite}
@keyframes cpBellN{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-14deg)}94%{transform:rotate(12deg)}97%{transform:rotate(-8deg)}}
html body #cp-box h3{color:var(--cp-text);font-weight:900;letter-spacing:-.02em}
html body #cp-close{background:var(--cp-card);color:var(--cp-text);border:1px solid var(--cp-border);transition:.25s}
html body #cp-close:hover{background:#4A1FE0;color:#fff;border-color:transparent;transform:rotate(90deg)}
html body .cp-tabs{background:var(--cp-card);border-radius:16px}
html body .cp-tab{border-radius:12px;font-weight:800}
html body .cp-card,html body .cp-row,html body .cp-offer{background:var(--cp-card);border-radius:18px;color:var(--cp-text)}
html body .cp-row:hover{border-color:var(--nv-v)}
html body .cp-btn{border-radius:14px}
html body .cp-btn.dl{color:var(--nv-v);border:1.5px solid color-mix(in srgb,var(--nv-v) 40%,transparent);box-shadow:none}
html body .cp-btn.dl:hover{background:color-mix(in srgb,var(--nv-v) 8%,transparent);box-shadow:none}
html body .cp-offer .badge{border-radius:20px}

/* chat bot accent */
html .sv-bot4{--sv-accent:var(--nv-v);--sv-accent2:var(--nv-v2)}

/* every card gets a clear violet / mauve frame so all cards show (white and black themes) */
html :is(.card,.store-form,.massorder-card,.bonus-card,.table-responsive,.modal-box,.stat-card,.order-card,.refill-card,.refund-card,.subscription-card,.drip-feed-card,.levels-mini-card,.method-card,.feat-card,.category-box,.step-item,.accordion-item,.welcome-box,
  .services .card,.features .wrapper .box,.works .step-item,.testimonials .card,.home-v2 .home-bento__main .card,.home-v2 .home-bento__side .box,.home-v2 .timeline .step-item,.hero .stats .item,.counters .item,.pricing .table-responsive,.nv-foot__card,.nv-card,.nv-chip,.nv-tb,.nv-cur,.nv-menu){
  border-width:1.5px!important;border-style:solid!important}
html :is(.hero .stats .item,.nv-card,.nv-chip,.nv-tb,.nv-cur,.nv-menu,.nv-foot__card,.accordion-item){border-color:color-mix(in srgb,var(--nv-v) 45%,transparent)!important}
html :is(.form-control,.form-select,textarea,select,.input-group input){border-color:color-mix(in srgb,var(--nv-v) 40%,transparent)!important}


/* =====================================================================
   NOVA CARDS v2  -  a new card system for the dashboard pages
   shape  : every card has one tight corner (bottom-start) + a coloured rail
   content: KPI bento cards, level ring, ticket-style order cards with progress,
            row-cards for services, icon tiles for platforms, segmented tabs
   (installs on top of the template - same markup, new design)
===================================================================== */
:root{--nv-corner:26px 26px 26px 7px;--nv-corner-sm:16px 16px 16px 5px;--nv-ok2:#22c55e;--nv-warn2:#f59e0b;--nv-bad2:#ef4444}

/* ------------------------------------------------------------ header */
html body .page-header{padding-inline:26px}
html body .page-header .header-left .subtitle{display:inline-block;padding:3px 10px;border-radius:99px 99px 99px 3px;background:var(--main-opacity);color:var(--nv-v)!important;letter-spacing:.18em;font-size:9.5px}
html body .page-header .header-left .header-title h1{font-size:20px;letter-spacing:-.02em}
html body .page-header .header-right .balance-box{border-radius:16px 16px 16px 5px!important;height:46px!important}
html body .page-header .header-right .wallet-icon{border-radius:12px 12px 12px 4px!important}
html.nv-hide-money :is(.balance-amount,.balance-box strong,.balance-row h3,.stat-card.balance .card-value,.stat-card.balance h3,[data-money]){filter:blur(7px);user-select:none;transition:filter .25s}

/* ----------------------------------------------------------- sidebar */
html body .sidebar-body .user-box{
  display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:2px 12px;text-align:start!important;
  margin:14px 12px 6px;padding:14px!important;border:1px solid var(--border-color)!important;border-radius:var(--nv-corner)!important;background:var(--secondary-color)}
html body .sidebar-body .user-box .user-avatar{width:60px!important;height:60px!important;margin:0!important;grid-row:1 / span 3}
html body .sidebar-body .user-box .user-border{border-width:2px!important}
html body .sidebar-body .user-box .username{justify-content:flex-start!important;font-size:14px!important;margin:0!important}
html body .sidebar-body .user-box .level{justify-self:start;margin-top:2px}
html body .sidebar-body .user-box .user-avatar .go-arrow{display:none!important}
html body .sidebar-menu-flat>.nav-menu>li>a{min-height:46px!important;border-radius:14px 14px 14px 5px!important;padding-inline:12px!important;gap:12px!important}
html body .sidebar-menu-flat .nav-icon{width:34px;height:34px;border-radius:11px 11px 11px 4px!important;display:grid!important;place-items:center;background:var(--main-opacity)!important;color:var(--nv-v)!important;flex:none}
html body .sidebar-menu-flat>.nav-menu>li.active>a,html body .sidebar-menu-flat>.nav-menu>li>a.active{background:var(--main-opacity)!important;color:var(--text-main)!important;box-shadow:inset 4px 0 0 var(--nv-f)!important}
html body .sidebar-menu-flat>.nav-menu>li.active>a .nav-icon{background:var(--nv-v)!important;color:#fff!important}
html body .sidebar-music-player{border-radius:var(--nv-corner-sm)!important}

/* --------------------------------------------------- KPI bento cards */
html body .main-boxes .stats-grid{gap:16px!important}
html body .main-boxes .stat-card,html body .new-order .main-boxes .stat-card{
  --rail:var(--nv-v);min-height:140px!important;padding:18px 18px 16px!important;border-radius:var(--nv-corner)!important;
  box-shadow:var(--nv-shadow),inset 0 3px 0 0 var(--rail)!important}
html body .main-boxes .stat-card.orange{--rail:var(--nv-f)}
html body .main-boxes .stat-card.success{--rail:var(--nv-v2)}
html body .main-boxes .stat-card .card-header{align-items:flex-start!important;margin-bottom:10px!important}
html body .main-boxes .stat-card .card-label{font-size:11px!important;letter-spacing:.08em;color:var(--text-light)!important;text-transform:uppercase}
html body .main-boxes .stat-card .icon-box{width:40px!important;height:40px!important;border-radius:14px 14px 14px 5px!important;font-size:17px!important}
html body .main-boxes .stat-card .card-value{font-size:34px!important;line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:2px 0 10px!important}
html body .main-boxes .stat-card .card-meta{width:fit-content;padding:4px 10px;border-radius:99px 99px 99px 3px;background:var(--main-opacity);font-size:10.5px!important}
html body .main-boxes .stat-card.balance,html body .new-order .main-boxes .stat-card.balance{
  --rail:var(--nv-f);background:linear-gradient(160deg,color-mix(in srgb,var(--nv-v) 38%,#000),color-mix(in srgb,var(--nv-v) 72%,#000)) padding-box,linear-gradient(var(--nv-v),var(--nv-v)) border-box!important;
  border:1.5px solid transparent!important;color:#fff!important;box-shadow:var(--nv-shadow),inset 0 3px 0 0 var(--nv-f)!important}
html body .main-boxes .stat-card.balance :is(.card-label,.balance-row span){color:rgba(255,255,255,.78)!important}
html body .main-boxes .stat-card.balance :is(.balance-row h3,.card-value){color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(15px,1.55vw,22px)!important;letter-spacing:-.02em;white-space:nowrap}
html body .main-boxes .stat-card.balance .balance-row{flex-wrap:nowrap;align-items:baseline;gap:6px}
html body .main-boxes .stat-card.balance .icon-btn-sm{width:34px;height:34px;border-radius:11px 11px 11px 4px;background:rgba(255,255,255,.16)!important;color:#fff!important}
html body .main-boxes .stat-card.balance .add-balance-btn{background:var(--nv-f)!important;color:#fff!important;border-radius:12px 12px 12px 4px!important;padding:10px!important;font-size:12px!important;font-weight:900;box-shadow:none!important}
html body .main-boxes .stat-card.balance .card-bg{display:none!important}
html body .main-boxes .stat-card.balance .card-meta{background:rgba(255,255,255,.2)}
.stat-card .nv-spark{position:absolute;inset-inline-end:14px;bottom:12px;width:96px;height:36px;pointer-events:none;opacity:.9}
.stat-card .nv-spark path{fill:none;stroke:var(--nv-f);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stat-card .nv-spark .area{fill:color-mix(in srgb,var(--nv-f) 14%,transparent);stroke:none}
.stat-card.balance .nv-spark path{stroke:#fff}.stat-card.balance .nv-spark .area{fill:rgba(255,255,255,.18)}
/* level ring replaces the thin bar */
.stat-card .nv-ring2{position:absolute;inset-inline-end:16px;bottom:14px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--nv-f) calc(var(--p,0) * 1%),color-mix(in srgb,var(--nv-v) 18%,transparent) 0)}
.stat-card .nv-ring2::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--card-solid)}
.stat-card .nv-ring2 b{position:relative;font-size:12px;font-weight:900;color:var(--text-main)}
.stat-card.nv-has-ring .progress{display:none!important}

/* --------------------------------------------------- quick support */
html body .new-order .quick-support{border-radius:var(--nv-corner)!important;border-inline-start:4px solid var(--nv-f)!important;padding:14px 18px!important}
html body .new-order .quick-support__link{border-radius:14px 14px 14px 5px!important}

/* ---------------------------------------------- platform icon tiles */
html body .new-order .platform-filter .filter-list{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;gap:10px!important}
html body .new-order .platform-filter .brand-category{
  flex-direction:row!important;justify-content:flex-start!important;gap:10px;min-height:54px!important;padding:8px 12px!important;border-radius:var(--nv-corner-sm)!important;text-align:start}
html body .new-order .platform-filter .filter-icon{position:static!important;translate:none!important;inset:auto!important;width:32px!important;height:32px!important;border-radius:10px 10px 10px 4px;background:var(--main-opacity);flex:none}
html body .new-order .platform-filter .filter-text{flex:1;width:auto!important;min-width:0;font-size:12px!important;font-weight:800;text-align:start!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .new-order .platform-filter .brand-category.active .filter-icon{background:rgba(255,255,255,.22)}
/* ---------------------------------------------------------- forms */
html body .form-label,html body .control-label{font-size:11px!important;letter-spacing:.09em;text-transform:uppercase;color:var(--nv-v)!important}
html body .form-control,html body .form-select,html body .select2-container .select2-selection--single{border-radius:14px 14px 14px 5px!important;min-height:50px}
html body .main-btn,html body .submit-btn,html body .btn-order-now{border-radius:14px 14px 14px 5px!important}

/* ------------------------------------------ order cards = tickets */
html body .orders .order-card{
  --st:var(--nv-v);padding:16px 16px 14px 18px!important;gap:12px!important;border-radius:var(--nv-corner)!important;background:var(--card-solid)!important}
html body .orders .order-card::before{content:"";position:absolute;inset-block:16px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:var(--st)}
html body .orders .status-completed{--st:var(--nv-ok2)}
html body .orders .status-pending{--st:var(--nv-warn2)}
html body .orders .status-inprogress,html body .orders .status-processing{--st:var(--nv-v)}
html body .orders .status-partial{--st:var(--nv-f)}
html body .orders .status-canceled{--st:var(--nv-bad2)}
html body .orders .order-card-status{border:0!important;color:var(--st)!important;background:color-mix(in srgb,var(--st) 14%,transparent)!important;border-radius:10px 10px 10px 3px!important;padding:7px 11px!important}
html body .orders .order-card .btn-copy{border-radius:9px 9px 9px 3px!important}
html body .orders .order-card-service p{font-size:13px!important}
html body .orders .order-card-link{border-radius:12px 12px 12px 4px!important;border-style:dashed!important}
html body .orders .order-card-meta{position:relative;margin:2px -16px 0 -18px!important;padding:14px 16px 0 18px!important;border-top:2px dashed var(--border-color)}
html body .orders .order-card-meta::before,html body .orders .order-card-meta::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--bg-color);border:1.5px solid var(--border-color)}
html body .orders .order-card-meta::before{inset-inline-start:-9px}
html body .orders .order-card-meta::after{inset-inline-end:-9px}
html body .orders .order-card-stats>div{border:0!important;background:var(--secondary-color)!important;border-radius:12px 12px 12px 4px!important}
.order-card .nv-prog{display:flex;align-items:center;gap:10px}
.order-card .nv-prog .t{flex:1;height:8px;border-radius:99px;background:color-mix(in srgb,var(--st,var(--nv-v)) 16%,transparent);overflow:hidden}
.order-card .nv-prog i{display:block;height:100%;border-radius:99px;background:var(--st,var(--nv-v))}
.order-card .nv-prog span{flex:none;min-width:36px;text-align:end;font-size:11px;font-weight:900;color:var(--st,var(--nv-v));font-variant-numeric:tabular-nums}html body .orders .orders-bulk-toolbar{border-radius:var(--nv-corner-sm)!important}

/* -------------------------------------- services = row cards */
html body .services .table-wrapper table{border-collapse:separate!important;border-spacing:0 10px!important}
html body .services .table-wrapper tbody tr.service-row{background:transparent!important;box-shadow:none!important;transform:none}
html body .services .table-wrapper .service-row>td{background:var(--card-solid);border-block:1.5px solid color-mix(in srgb,var(--nv-v) 30%,transparent);vertical-align:middle!important;transition:background .2s,border-color .2s}
html body .services .table-wrapper .service-row>td:first-child{border-inline-start:1.5px solid color-mix(in srgb,var(--nv-v) 30%,transparent);border-start-start-radius:24px;border-end-start-radius:7px!important;border-radius:0}
html body .services .table-wrapper .service-row>td:last-child{border-inline-end:1.5px solid color-mix(in srgb,var(--nv-v) 30%,transparent);border-start-end-radius:24px;border-end-end-radius:24px}
html body .services .table-wrapper .service-row>td:first-child{box-shadow:inset 4px 0 0 var(--nv-f)}
html body .services .table-wrapper tbody tr.service-row:hover>td{background:var(--main-opacity);border-color:var(--nv-v)}
html body .services .table-wrapper .td-badge{border-radius:99px 99px 99px 3px!important;background:var(--main-opacity)!important;border:0!important;color:var(--text-main)}
html body .services .table-wrapper .category-name{border-radius:var(--nv-corner-sm)!important;background:var(--nv-v)!important;color:#fff!important}
html body .services .table-wrapper .btn-order-now,html body .services .table-wrapper .btn-fav,html body .services .table-wrapper .btn-details{border-radius:12px 12px 12px 4px!important}

/* -------------------------------- tabs = segmented control */
html body .tabs-header,html body .order-nav,html body .massorder .mode-switch{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:var(--nv-corner-sm);background:var(--secondary-color);border:1px solid var(--border-color)}
html body .tabs-header .tab-btn,html body .massorder .mode-item{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:12px 12px 12px 4px!important}
html body .tabs-header .tab-btn.active,html body .massorder .mode-item.active{background:var(--nv-v)!important;color:#fff!important}
html body .addfunds .methods .method-card,html body .method-card{border-radius:var(--nv-corner-sm)!important}

/* ------------------------------------ generic tables & cards */
html body .table-responsive{border-radius:var(--nv-corner)!important}
html body .table-responsive table thead th{background:var(--main-opacity)!important;color:var(--nv-v)!important}
html body :is(.refill-card,.refund-card,.subscription-card,.drip-feed-card,.massorder-card,.bonus-card,.store-form,.levels-mini-card){border-radius:var(--nv-corner)!important}
html body .card{border-radius:var(--nv-corner)!important}
html body .alert{border-radius:var(--nv-corner-sm)!important}

@media (max-width:640px){
  html body .main-boxes .stat-card .card-value{font-size:28px!important}
  .stat-card .nv-spark{width:80px}
}

/* balance card: breathing room between label, amount and button */
html body .main-boxes .stat-card.balance{padding:20px 20px 18px!important}
html body .main-boxes .stat-card.balance .card-header{margin-bottom:16px!important}
html body .main-boxes .stat-card.balance .balance-row{margin:0 0 18px!important;gap:8px!important;direction:ltr;justify-content:flex-start}
html body .main-boxes .stat-card.balance .balance-row h3{line-height:1.2;word-spacing:.2em;font-variant-numeric:tabular-nums}
html body .main-boxes .stat-card.balance .balance-row span{font-size:16px!important;opacity:.9}
html body .main-boxes .stat-card.balance .add-balance-btn{margin-top:auto!important;width:100%}
/* header balance card: wallet icon | amount | eye - clean spacing (real markup: button.balance-box > .wallet-icon + .balance-text > h5.balance-amount) */
html body .page-header .header-right .balance-box{display:flex!important;align-items:center;gap:10px!important;height:48px!important;padding:0 8px 0 12px!important;min-width:0;cursor:default}
html body .page-header .header-right .balance-box .balance-text{display:flex;align-items:center;min-width:0}
html body .page-header .header-right .balance-box .balance-amount,html body .page-header .header-right .balance-box h5{margin:0!important;display:inline-flex;gap:.5em;align-items:baseline;white-space:nowrap;font-size:15px!important;font-weight:900;font-variant-numeric:tabular-nums;word-spacing:.3em;letter-spacing:0;direction:ltr;line-height:1.2}
/* blog: the articles hard-code white text (font color="#ffffff") - make them readable on the white theme */
html:not(.dark) .blog .content,html:not(.dark) .blog .content *:not(a):not(button):not(code):not(pre){color:var(--text-main)!important}
html:not(.dark) .blog .content font[color]{color:var(--text-main)!important}
html body .blog .lists .post .content,html body .blog .lists .post .content *{font-size:14px!important;line-height:1.9!important}
html body .blog .lists .post .content,html body .blog .lists .post .content *:not(a){color:var(--text-light)!important}
html body .blog .post{border-radius:var(--nv-corner)!important;overflow:hidden}
html body .blog .post .title{font-weight:900;letter-spacing:-.01em}

/* =====================================================================
   NOVA WOW  -  real mix of colours + interaction (hover / glow / depth)
   mix = mauve -> light mauve -> 3rd colour, used in buttons, rails, rings, text
===================================================================== */
:root{
  --nv-mix:linear-gradient(120deg,var(--nv-v) 0%,var(--nv-v2) 48%,var(--nv-f) 100%);
  --nv-mix-r:linear-gradient(300deg,var(--nv-v) 0%,var(--nv-v2) 48%,var(--nv-f) 100%);
  --nv-glow:color-mix(in srgb,var(--nv-f) 48%,transparent);
  --nv-glow-v:color-mix(in srgb,var(--nv-v) 52%,transparent);
}

/* ------------------------------------------------------ spotlight + depth */
.nv-fx{position:relative;--mx:50%;--my:0%;--rx:0deg;--ry:0deg}
.nv-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s;
  background:radial-gradient(280px circle at var(--mx) var(--my),color-mix(in srgb,var(--nv-f) 24%,transparent),transparent 62%)}
.nv-fx:hover::after{opacity:1}
html body .nv-fx:hover{box-shadow:0 26px 60px -24px var(--nv-glow-v),0 0 0 1px color-mix(in srgb,var(--nv-f) 38%,transparent)!important}
html body .stat-card.nv-fx{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out,box-shadow .3s;will-change:transform}

/* ------------------------------------------------------------ KPI bento */
html body .main-boxes .stats-grid{display:grid!important;grid-template-columns:minmax(0,1.75fr) repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:stretch}
@media (max-width:1180px){html body .main-boxes .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body .main-boxes .stat-card.balance{grid-column:1 / -1}}

html body .main-boxes .stat-card,html body .new-order .main-boxes .stat-card{
  order:0!important;min-height:0!important;padding:18px 20px!important;border-radius:30px 30px 30px 8px!important;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--rail,var(--nv-v)) 20%,transparent),transparent 60%),var(--card-solid)!important}
html body .main-boxes .stat-card.primary{--rail:var(--nv-v)}
html body .main-boxes .stat-card.orange{--rail:var(--nv-f)}
html body .main-boxes .stat-card.success{--rail:var(--nv-v2)}
html body .main-boxes .stat-card .card-header{margin-bottom:6px!important}
html body .main-boxes .stat-card .icon-box{width:46px!important;height:46px!important;border-radius:16px 16px 16px 5px!important;font-size:19px!important;
  background:var(--nv-mix)!important;color:#fff!important;box-shadow:0 12px 26px -10px var(--nv-glow)}
html body .main-boxes .stat-card .card-label{font-size:11px!important;letter-spacing:.12em}

/* wallet card (balance) */
html body .main-boxes .stat-card.balance,html body .new-order .main-boxes .stat-card.balance{
  order:-1!important;min-height:236px!important;color:#fff!important;border:1px solid color-mix(in srgb,var(--nv-v2) 55%,transparent)!important;
  background:
    radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--nv-f) 62%,transparent),transparent 56%),
    radial-gradient(100% 120% at 0% 100%,color-mix(in srgb,var(--nv-v2) 78%,transparent),transparent 58%),
    linear-gradient(150deg,color-mix(in srgb,var(--nv-v) 42%,#07050f),#07050f 78%) padding-box,
    linear-gradient(120deg,var(--nv-v2),var(--nv-f)) border-box!important;
  box-shadow:0 34px 70px -28px var(--nv-glow),0 0 0 1px rgba(255,255,255,.06) inset!important}
html body .main-boxes .stat-card.balance .card-content{display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;height:100%}
html body .main-boxes .stat-card.balance .card-label{color:rgba(255,255,255,.82)!important;font-size:12px!important}
html body .main-boxes .stat-card.balance .icon-btn-sm{width:38px;height:38px;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.16)!important;color:#fff!important;backdrop-filter:blur(8px)}
html body .main-boxes .stat-card.balance .balance-row{margin:0!important;gap:8px!important;direction:ltr;justify-content:flex-start;align-items:baseline}
html body .main-boxes .stat-card.balance .balance-row h3{font-size:clamp(22px,2.5vw,36px)!important;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;white-space:nowrap;text-shadow:0 6px 24px rgba(0,0,0,.35)}
html body .main-boxes .stat-card.balance .add-balance-btn{margin:0!important;width:fit-content;min-width:150px;padding:11px 22px!important;border-radius:14px 14px 14px 4px!important;font-size:12.5px!important;font-weight:900;
  background:rgba(255,255,255,.95)!important;color:var(--nv-v)!important;box-shadow:0 16px 34px -12px rgba(0,0,0,.55)!important}
html body .main-boxes .stat-card.balance .add-balance-btn:hover{background:var(--nv-f)!important;color:#fff!important}
html body .main-boxes .stat-card.balance .card-bg{display:none!important}
.nv-wc{display:flex;align-items:center;gap:14px;direction:ltr;align-self:center}
.nv-wc__chip{width:46px;height:34px;border-radius:8px;background:linear-gradient(135deg,#f6e7b4,#c9a24a 55%,#f1dd9a);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.nv-wc__chip::before,.nv-wc__chip::after{content:"";position:absolute;left:8px;right:8px;height:1px;background:rgba(0,0,0,.28)}
.nv-wc__chip::before{top:11px}.nv-wc__chip::after{bottom:11px}
.nv-wc__no{font-size:13px;letter-spacing:.22em;color:rgba(255,255,255,.7);font-weight:700;font-variant-numeric:tabular-nums}
.nv-wc__no b{color:#fff;letter-spacing:.14em}
.nv-wc__brand{position:absolute;inset-inline-end:20px;bottom:20px;font-size:11px;font-weight:900;letter-spacing:.3em;color:rgba(255,255,255,.55);text-transform:uppercase}
.nv-wc__sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s ease}
.stat-card.balance:hover .nv-wc__sheen{transform:translateX(120%)}

/* level gauge */
html body .main-boxes .stat-card.orange .level-row{margin:0 0 4px!important}
html body .main-boxes .stat-card .level-badge{background:var(--nv-mix)!important;color:#fff!important;border-radius:99px 99px 99px 3px!important;font-size:10.5px!important;padding:4px 10px!important;box-shadow:0 8px 18px -8px var(--nv-glow)}
html body .stat-card.orange .nv-ring2{position:relative;inset:auto;width:104px;height:104px;margin:4px auto 0;
  background:conic-gradient(from -90deg,var(--nv-v),var(--nv-v2),var(--nv-f) calc(var(--p,0) * 1%),color-mix(in srgb,var(--nv-v) 16%,transparent) 0);box-shadow:0 14px 34px -14px var(--nv-glow)}
html body .stat-card.orange .nv-ring2::before{inset:9px}
html body .stat-card.orange .nv-ring2 b{font-size:20px;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* spend + orders */
html body .main-boxes .stat-card.success .card-value{font-size:44px!important;font-weight:900;letter-spacing:-.04em;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:4px 0 8px!important}
.nv-bars{position:absolute;inset-inline:22px;bottom:20px;height:44px;display:flex;align-items:flex-end;gap:6px;pointer-events:none;z-index:0}
.nv-bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--nv-mix);opacity:.9;transform-origin:bottom;animation:nvGrow .9s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes nvGrow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
html body .main-boxes .stat-card.success .card-meta{margin-bottom:56px}
html body .stat-card.primary .nv-spark{width:calc(100% - 44px);inset-inline:22px;height:74px;bottom:18px}
html body .stat-card.primary .nv-spark path{stroke:url(#nvgrad);stroke-width:3}
html body .main-boxes .stat-card.primary .card-meta{margin-bottom:84px}

/* ------------------------------------------------------------- buttons */
html body :is(.btn-primary,.main-btn,.submit-btn,.btn-pay,.btn-order-now,.store-submit,.btn-search,.new-order-search-button,.login-submit-btn,.btn-details,form button[type=submit]){
  background:var(--nv-mix)!important;background-size:230% 100%!important;background-position:0 0!important;color:#fff!important;border:0!important;
  box-shadow:0 14px 32px -12px var(--nv-glow),inset 0 1px 0 rgba(255,255,255,.3)!important;
  transition:background-position .6s ease,transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s!important}
html body :is(.btn-primary,.main-btn,.submit-btn,.btn-pay,.btn-order-now,.store-submit,.btn-search,.new-order-search-button,.login-submit-btn,.btn-details,form button[type=submit]):hover{
  background-position:100% 0!important;transform:translateY(-3px) scale(1.015)!important;filter:none!important;
  box-shadow:0 22px 44px -12px var(--nv-glow-v),0 0 0 4px color-mix(in srgb,var(--nv-f) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.4)!important}
html body :is(.btn-primary,.main-btn,.submit-btn,.btn-pay,.store-submit):active{transform:translateY(0) scale(.98)!important}

/* ------------------------------------------------------------ sidebar */
html body .sidebar .sidebar-body{
  margin:0 12px 12px!important;max-height:calc(100% - 84px)!important;height:calc(100% - 84px)!important;border-radius:30px!important;
  border:1px solid color-mix(in srgb,var(--nv-v) 38%,transparent)!important;box-shadow:0 34px 70px -34px var(--nv-glow-v)!important;
  background:radial-gradient(120% 55% at 50% 0%,color-mix(in srgb,var(--nv-v) 20%,transparent),transparent 62%),var(--card-solid)!important}
html body .sidebar-body .user-box{background:linear-gradient(145deg,color-mix(in srgb,var(--nv-v) 16%,transparent),color-mix(in srgb,var(--nv-f) 10%,transparent))!important;border-radius:26px 26px 26px 7px!important}
html body .sidebar-body .user-box .user-border{border:0!important;padding:3px!important;background:conic-gradient(from 0deg,var(--nv-v),var(--nv-f),var(--nv-v2),var(--nv-v))!important;box-shadow:0 12px 30px -10px var(--nv-glow)!important}
html body .sidebar-body .user-box .user-border>p{border-radius:50%;background:var(--nv-mix)!important;color:#fff!important}
html body .sidebar-menu-flat>.nav-menu>li>a{position:relative;overflow:hidden;border-radius:18px 18px 18px 6px!important;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),background .3s,box-shadow .3s!important}
html body .sidebar-menu-flat>.nav-menu>li>a:hover{transform:translateX(-7px);background:color-mix(in srgb,var(--nv-v) 12%,transparent)!important;color:var(--text-main)!important}
html body .sidebar-menu-flat .nav-icon{transition:transform .35s cubic-bezier(.2,.9,.3,1.5),background .3s,color .3s,box-shadow .3s!important}
html body .sidebar-menu-flat>.nav-menu>li>a:hover .nav-icon{background:var(--nv-mix)!important;color:#fff!important;transform:rotate(-9deg) scale(1.12);box-shadow:0 10px 22px -8px var(--nv-glow)}
html body .sidebar-menu-flat>.nav-menu>li.active>a{background:var(--nv-mix)!important;color:#fff!important;box-shadow:0 16px 34px -12px var(--nv-glow)!important}
html body .sidebar-menu-flat>.nav-menu>li.active>a::after{content:"";position:absolute;top:0;bottom:0;width:36%;inset-inline-start:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:nvSweepNav 5.5s ease-in-out infinite}
@keyframes nvSweepNav{0%,55%{inset-inline-start:-60%}85%,100%{inset-inline-start:130%}}
html body .sidebar-menu-flat>.nav-menu>li.active>a .nav-icon{background:rgba(255,255,255,.24)!important;color:#fff!important}

/* ------------------------------------------------------ add funds tiles */
.nv-gw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.nv-gw button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:start;padding:14px;cursor:pointer;font-family:inherit;color:var(--text-main);
  background:var(--card-solid);border:1.5px solid color-mix(in srgb,var(--nv-v) 28%,transparent);border-radius:22px 22px 22px 6px;transition:transform .3s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s,border-color .3s}
.nv-gw button:hover{transform:translateY(-4px);border-color:var(--nv-f);box-shadow:0 22px 44px -20px var(--nv-glow)}
.nv-gw button i{width:42px;height:42px;border-radius:14px 14px 14px 5px;display:grid;place-items:center;font-size:18px;color:#fff;background:var(--nv-mix);box-shadow:0 12px 24px -10px var(--nv-glow)}
.nv-gw button b{font-size:13px;font-weight:900;line-height:1.4}
.nv-gw button small{font-size:10.5px;color:var(--text-light);font-weight:700}
.nv-gw button.on{border-color:transparent;background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-mix) border-box;box-shadow:0 24px 50px -20px var(--nv-glow-v)}
.nv-gw button.on::after{content:"\2713";position:absolute;top:10px;inset-inline-end:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--nv-mix);color:#fff;font-size:12px;font-weight:900}
.nv-gw-hide{position:absolute!important;opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important}
html body .addfunds .method .card{border-radius:32px 32px 32px 8px!important;padding:24px!important}
.nv-vp{border-radius:28px 28px 28px 8px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--nv-v) 38%,transparent);box-shadow:0 30px 60px -30px var(--nv-glow-v)}

@media (prefers-reduced-motion:reduce){.nv-fx::after,.nv-bars i,html body .sidebar-menu-flat>.nav-menu>li.active>a::after{animation:none!important;transition:none!important}}


/* =====================================================================
   NOVA PAGES - every dashboard page gets the new card system
===================================================================== */
:root{--sbw:300px}

/* ------------------------------------------------------- wider sidebar */
@media (min-width:992px){
  html body .sidebar,html body .sidebar .sidebar-header{width:var(--sbw)}
  html body .main-wrapper .page-content{width:calc(100% - var(--sbw))!important;margin-inline-start:var(--sbw)!important}
}
@media (max-width:991px){
  html body .sidebar{width:var(--sbw);margin-right:calc(var(--sbw) * -1)}
  html[dir="ltr"] body .sidebar{margin-left:calc(var(--sbw) * -1)!important}
  html body .sidebar-open .sidebar{margin-right:0}
}
html body .sidebar-menu{order:1!important;flex:1 1 auto;min-height:0;overflow-y:auto}
html body .sidebar-body .sidebar-music-player{order:2!important}
html body .sidebar-body .user-box{order:3!important;margin:6px 14px 8px!important;padding:12px 14px!important;grid-template-columns:auto 1fr!important}
html body .sidebar-body .sidebar-logout-btn{order:4!important}
html body .sidebar-body .user-box .user-avatar{width:52px!important;height:52px!important}
html body .sidebar-menu-flat>.nav-menu>li>a{min-height:52px!important;padding-inline:14px!important;gap:14px!important}
html body .sidebar-menu-flat .nav-label{font-size:14.5px!important;font-weight:800!important}
html body .sidebar-menu-flat .nav-icon{width:38px!important;height:38px!important;border-radius:13px 13px 13px 5px!important}

/* ------------------------------------------------ cards: headings + rails */
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card){position:relative}
html body .card>h2.title,html body .card>.title,html body .card>h3.title,html body .page-title{position:relative;padding-inline-start:16px;font-weight:900;letter-spacing:-.01em}
html body .card>h2.title::before,html body .card>.title::before,html body .card>h3.title::before,html body .page-title::before{
  content:"";position:absolute;inset-inline-start:0;top:12%;bottom:12%;width:5px;border-radius:5px;background:var(--nv-mix)}
html body .page-title{display:flex;align-items:center;gap:10px;font-size:22px}

/* ------------------------------------------------ tables turned into cards */
.nv-tcards{border-collapse:separate!important;border-spacing:0 12px!important;width:100%;min-width:0!important}
.nv-tcards thead{display:none!important}
.nv-tcards tbody{display:block}
.nv-tcards tbody tr{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:4px 16px;align-items:center;position:relative;overflow:hidden;margin-bottom:12px;
  padding:16px 20px 16px 18px;background:var(--card-solid)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 30%,transparent)!important;border-radius:26px 26px 26px 8px!important;
  box-shadow:var(--nv-shadow)!important;transition:transform .3s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s,border-color .3s}
.nv-tcards tbody tr::before{content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:var(--nv-mix)}
.nv-tcards tbody tr:hover{transform:translateY(-4px);border-color:var(--nv-f)!important;box-shadow:0 24px 50px -22px var(--nv-glow-v)!important}
.nv-tcards td{display:block!important;border:0!important;padding:4px 0!important;background:none!important;text-align:start!important;min-width:0;overflow-wrap:anywhere;opacity:1!important}
.nv-tcards td::before{content:attr(data-head);display:block!important;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--text-muted);margin-bottom:3px;text-transform:uppercase;white-space:normal;opacity:1!important}
.nv-tcards td[data-head=""]::before,.nv-tcards td:not([data-head])::before{display:none!important}
.table-responsive:has(.nv-tcards){background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important}
html body .updates-table-shell{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.nv-tcards .update-service-cell{grid-column:span 2}

/* -------------------------------------------------------------- refunds */
html body .refund-card{position:relative;overflow:hidden;border-radius:var(--nv-corner)!important;padding:18px 18px 16px 20px!important;background:var(--card-solid)!important}
html body .refund-card::before{content:"";position:absolute;inset-block:16px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:var(--nv-mix)}
html body .refund-card .refund-details>div{background:var(--secondary-color)!important;border:0!important;border-radius:16px 16px 16px 5px!important}
html body .refund-card .refund-details b{font-size:15px;font-weight:900}
html body .refund-status{border-radius:10px 10px 10px 3px!important}
html body .refunds-alert{border-radius:var(--nv-corner-sm,16px)!important;border-inline-start:4px solid var(--nv-f)!important}

/* ----------------------------------------------------------------- blog */
html body .blog .post{background:var(--card-solid)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 30%,transparent)!important;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s}
html body .blog .post:hover{transform:translateY(-6px);box-shadow:0 30px 60px -26px var(--nv-glow-v)}
html body .blog .post .image{position:relative;overflow:hidden}
html body .blog .post .image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--nv-v) 35%,transparent))}
html body .blog .post .image img{transition:transform .8s ease}
html body .blog .post:hover .image img{transform:scale(1.06)}

/* ------------------------------------------------------------------- api */
html body .api .method-title{display:inline-flex;align-items:center;gap:8px;margin:26px 0 12px;padding:7px 16px;border-radius:99px 99px 99px 4px;background:var(--nv-mix);color:#fff!important;font-size:13px;font-weight:900;box-shadow:0 12px 26px -12px var(--nv-glow)}
html body .api .example pre,html body .api pre{position:relative;margin:10px 0 0;padding:46px 22px 20px;border-radius:22px 22px 22px 6px;background:#0a0814!important;color:#e9e6ff!important;border:1px solid color-mix(in srgb,var(--nv-v) 45%,transparent);overflow:auto;direction:ltr;text-align:left;font-size:12.5px;line-height:1.8}
html body .api pre::before{content:"";position:absolute;top:16px;left:18px;width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:19px 0 0 #febc2e,38px 0 0 #28c840}
html body .api .example strong{display:block;margin-top:18px;font-weight:900}
html body .api .select-wrapper select,html body .api select.select{border-radius:14px 14px 14px 5px!important}

/* ------------------------------------------------------- mass order / child panel */
html body .massorder-card{padding:26px!important;background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--nv-v) 14%,transparent),transparent 60%),var(--card-solid)!important}
html body .massorder textarea.form-control{min-height:210px;border-radius:20px 20px 20px 6px!important;font-family:ui-monospace,Consolas,monospace;font-size:13px}
html body .massorder .help-text code{display:inline-block;padding:4px 10px;border-radius:9px;background:var(--main-opacity);color:var(--nv-v);font-weight:800;direction:ltr}
html body .massorder .submit-btn{width:100%;height:52px;margin-top:16px;font-size:14px;font-weight:900}
html body .childpanel-create .welcome-box{position:relative;overflow:hidden;padding:30px!important;border-radius:32px 32px 32px 8px!important;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--nv-f) 55%,transparent),transparent 58%),radial-gradient(100% 120% at 0% 100%,color-mix(in srgb,var(--nv-v2) 70%,transparent),transparent 58%),linear-gradient(150deg,color-mix(in srgb,var(--nv-v) 40%,#07050f),#07050f 80%)!important;border:1px solid color-mix(in srgb,var(--nv-v2) 50%,transparent)!important;color:#fff!important}
html body .childpanel-create .welcome-box h2{font-size:26px;font-weight:900;color:#fff}
html body .childpanel-create .welcome-box p{color:rgba(255,255,255,.85)!important;line-height:2}
html body .dns-box{border-radius:var(--nv-corner)!important;padding:20px!important}
html body .dns-item{border-radius:16px 16px 16px 5px!important;font-family:ui-monospace,Consolas,monospace;font-weight:800;border:1.5px dashed color-mix(in srgb,var(--nv-v) 50%,transparent)!important;background:var(--main-opacity)!important}

/* -------------------------------------------------------------- affiliates */
html body .affiliates .header{text-align:center;padding:30px 20px;margin-bottom:10px;border-radius:32px 32px 32px 8px;background:radial-gradient(100% 140% at 50% 0%,color-mix(in srgb,var(--nv-v) 22%,transparent),transparent 65%)}
html body .affiliates .header h2{font-size:30px;font-weight:900;letter-spacing:-.02em;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body .ref-link{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .ref-link .value{direction:ltr;font-weight:800;padding:8px 14px;border-radius:12px 12px 12px 4px;background:var(--main-opacity);word-break:break-all}
html body .affiliates .badge-soft{background:var(--nv-mix)!important;color:#fff!important;border:0!important;padding:5px 14px;font-weight:900}
html body .affiliates .money{font-size:20px;font-weight:900;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===================================================== NEW ORDER layout */
html body .instructions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch!important;gap:20px!important}
@media (max-width:1100px){html body .instructions{grid-template-columns:minmax(0,1fr)!important}}
html body .instructions>div{display:flex!important;flex-direction:column;border-radius:var(--nv-corner)!important;padding:24px!important;min-width:0}
html body .instructions .order-info{gap:16px;justify-content:flex-start}
html body .instructions .order-info img{display:none!important}
html body .instructions .order-info :is(p,li,span,div,small){font-size:14px!important;line-height:2!important;font-weight:600}
html body .instructions .order-info h5,html body .instructions .order-info h4,html body .instructions .order-info h3{font-size:18px!important;font-weight:900!important;margin:4px 0 0;text-align:start;display:flex;align-items:center;gap:10px}
html body .instructions .order-info h5::before,html body .instructions .order-info h4::before{content:"";width:5px;height:22px;border-radius:5px;background:var(--nv-mix)}
html body .instructions .order-info :is(ol,ul){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:nvl}
html body .instructions .order-info :is(ol,ul)>li{position:relative;counter-increment:nvl;padding:10px 14px 10px 14px;padding-inline-start:52px;border-radius:16px 16px 16px 5px;background:var(--secondary-color);border:1px solid color-mix(in srgb,var(--nv-v) 18%,transparent);text-align:start!important}
html body .instructions .order-info :is(ol,ul)>li::before{content:counter(nvl);position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:10px 10px 10px 3px;display:grid;place-items:center;background:var(--nv-mix);color:#fff;font-size:12px;font-weight:900}
/* animated levels scene */
.nv-scene{position:relative;border-radius:24px 24px 24px 7px;overflow:hidden;min-height:210px;display:grid;place-items:end center;text-align:center;
  background:radial-gradient(90% 110% at 50% 0%,color-mix(in srgb,var(--nv-f) 38%,transparent),transparent 62%),radial-gradient(100% 120% at 0% 100%,color-mix(in srgb,var(--nv-v2) 60%,transparent),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--nv-v) 45%,#07050f),#07050f 85%);
  border:1px solid color-mix(in srgb,var(--nv-v2) 45%,transparent);color:#fff}
.nv-scene svg{display:block;width:100%;height:auto;max-height:190px}
.nv-scene__t{position:absolute;top:14px;inset-inline:0;font-size:17px;font-weight:900;letter-spacing:-.01em;text-shadow:0 6px 22px rgba(0,0,0,.5)}
.nv-scene__s{position:absolute;top:40px;inset-inline:0;font-size:11.5px;opacity:.8;font-weight:700}
.nv-sh{transform-box:fill-box;transform-origin:50% 100%;animation:nvShield 4.2s ease-in-out infinite}
.nv-sh:nth-of-type(2){animation-delay:.25s}.nv-sh:nth-of-type(3){animation-delay:.5s}.nv-sh:nth-of-type(4){animation-delay:.75s}.nv-sh:nth-of-type(5){animation-delay:1s}
@keyframes nvShield{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.nv-star{animation:nvTw 3s ease-in-out infinite}.nv-star:nth-of-type(2n){animation-delay:.9s}.nv-star:nth-of-type(3n){animation-delay:1.7s}
@keyframes nvTw{0%,100%{opacity:.15}50%{opacity:1}}
.nv-rays{transform-box:fill-box;transform-origin:50% 50%;animation:nvSpinR 28s linear infinite}
@keyframes nvSpinR{to{transform:rotate(360deg)}}

/* ------------------------------------------------ brand app tiles (services card) */
html body .new-order .platform-filter .brand-category{--b:var(--nv-v);transition:transform .3s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s,border-color .3s!important}
html body .new-order .platform-filter .brand-category .filter-icon{background:color-mix(in srgb,var(--b) 16%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b) 40%,transparent);width:40px!important;height:40px!important;border-radius:14px 14px 14px 5px!important}
html body .new-order .platform-filter .brand-category .filter-icon img{width:24px!important;height:24px!important;filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--b) 50%,transparent))}
html body .new-order .platform-filter .brand-category.active{background:linear-gradient(135deg,var(--b),color-mix(in srgb,var(--b) 55%,#000))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 22px 44px -18px var(--b)!important}
html body .new-order .platform-filter .brand-category.active .filter-icon{background:rgba(255,255,255,.22)!important;box-shadow:none}
[data-brand=instagram]{--b:#E1306C}[data-brand=facebook]{--b:#1877F2}[data-brand=tiktok]{--b:#FE2C55}[data-brand=youtube]{--b:#FF0000}
[data-brand=twitter]{--b:#8A8AA0}[data-brand=telegram]{--b:#229ED9}[data-brand=snapchat]{--b:#F5C400}[data-brand=whatsapp]{--b:#25D366}
[data-brand=google]{--b:#4285F4}[data-brand=linkedin]{--b:#0A66C2}[data-brand=kwai]{--b:#FF4906}[data-brand=spotify]{--b:#1DB954}
[data-brand=all]{--b:var(--nv-f)}[data-brand=other]{--b:var(--nv-v2)}

/* ------------------------------------------------------ profile picture */
html body .sidebar-body .user-box .user-border>p{overflow:hidden;padding:0!important}
.nv-av-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.nv-av-edit{position:absolute;bottom:-4px;inset-inline-end:-4px;z-index:30;width:24px;height:24px;border-radius:50%;border:2px solid var(--card-solid);background:var(--nv-mix);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .25s}
.nv-av-edit:hover{transform:scale(1.18) rotate(-12deg)}
.nv-av-pop{position:fixed;z-index:2147483000;width:260px;padding:14px;border-radius:24px 24px 24px 7px;background:var(--card-solid);border:1.5px solid color-mix(in srgb,var(--nv-v) 45%,transparent);box-shadow:0 30px 70px -20px rgba(0,0,0,.55);direction:rtl;color:var(--text-main);font-family:inherit}
.nv-av-pop[hidden]{display:none}
.nv-av-pop__h{font-size:13px;font-weight:900;margin:0 2px 10px}
.nv-av-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.nv-av-grid button{padding:0;border:2px solid transparent;border-radius:50%;overflow:hidden;cursor:pointer;background:none;aspect-ratio:1/1;transition:transform .2s,border-color .2s}
.nv-av-grid button:hover{transform:scale(1.1);border-color:var(--nv-f)}
.nv-av-grid img{width:100%;height:100%;display:block}
.nv-av-up,.nv-av-rm{display:block;width:100%;text-align:center;padding:10px;border-radius:13px 13px 13px 4px;font-size:12px;font-weight:900;cursor:pointer;font-family:inherit;border:0}
.nv-av-up{background:var(--nv-mix);color:#fff;margin-bottom:6px}
.nv-av-rm{background:var(--secondary-color);color:var(--text-light)}
/* ---- sidebar v2: one tall panel (logo + menu + player + user), everything fits, no inner scroll */
@media (min-width:992px){
  html body .sidebar{padding:12px 12px 12px!important;box-sizing:border-box;height:100vh!important}
  html body .sidebar .sidebar-header{width:auto!important;margin:0!important;height:92px!important;border-radius:30px 30px 0 0!important;border:1px solid color-mix(in srgb,var(--nv-v) 38%,transparent)!important;border-bottom:0!important;background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--nv-v) 22%,transparent),transparent 70%),var(--card-solid)!important;box-shadow:none!important}
  html body .sidebar .sidebar-body{margin:0!important;height:calc(100% - 92px)!important;max-height:none!important;border-radius:0 0 30px 30px!important;border-top:0!important;display:flex!important;flex-direction:column;padding:6px 10px 10px!important;overflow:hidden}
  html body .sidebar-menu{flex:1 1 auto!important;overflow-y:auto;scrollbar-width:none}
  html body .sidebar-menu::-webkit-scrollbar{display:none}
  html body .sidebar-menu-flat>.nav-menu>li>a{min-height:44px!important}
  html body .sidebar-menu-flat .nav-icon{width:32px!important;height:32px!important}
  html body .sidebar-menu-flat .nav-label{font-size:14px!important}
  html body .sidebar-body .sidebar-music-player{margin:6px 4px!important;transform-origin:center;zoom:.9}
  html body .sidebar-body .user-box{margin:6px 4px!important;padding:10px 12px!important}
  html body .sidebar-body .user-box .user-avatar{width:46px!important;height:46px!important}
  html body .sidebar-body .sidebar-logout-btn{margin:0 4px 2px!important;min-height:40px!important}
}
html body .page-content>.content,html body .main-wrapper .content{padding-bottom:56px!important}@media (min-width:992px) and (min-height:760px){
  html body .sidebar-menu-flat>.nav-menu>li>a{min-height:39px!important;padding-block:2px!important}
  html body .sidebar-menu-flat .nav-icon{width:28px!important;height:28px!important;border-radius:10px 10px 10px 4px!important}
  html body .sidebar-menu-flat>.nav-menu{gap:2px!important}
  html body .sidebar-menu-flat>.nav-menu>li{margin:0!important}
  html body .sidebar-body .sidebar-music-player{zoom:.8}
}
/* one-row tables (affiliate link / stats): a strip of separate tiles instead of a card inside a card */
.nv-tcards.nv-one{border-spacing:0!important}
.nv-tcards.nv-one tbody tr{background:none!important;border:0!important;box-shadow:none!important;overflow:visible;padding:0!important;margin:0;gap:14px;transform:none!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.nv-tcards.nv-one tbody tr::before{display:none}
.nv-tcards.nv-one td{padding:16px 18px!important;border-radius:20px 20px 20px 6px!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 34%,transparent)!important;background:color-mix(in srgb,var(--nv-v) 7%,var(--card-solid))!important;transition:transform .3s,box-shadow .3s,border-color .3s}
.nv-tcards.nv-one td:hover{transform:translateY(-4px);border-color:var(--nv-f)!important;box-shadow:0 18px 36px -18px var(--nv-glow-v)}
.nv-tcards.nv-one td.td_link{grid-column:1/-1}
.nv-tcards.nv-one td .money{font-size:24px;font-weight:900;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nv-tcards.nv-one td .badge-soft{font-size:15px}
.affiliates .card br,.affiliates .table-responsive br{display:none}
.affiliates .card .table-responsive{margin-top:10px}
/* ================= support centre (tickets page) ================= */
@media (min-width:1100px){
  html body .tickets{max-width:1240px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
  html body .tickets>.nv-sup{grid-column:1/-1}
}
html body .tickets>.nv-tl{display:flex;flex-direction:column;gap:14px;min-width:0}
html body .tickets>.nv-tl>.search{margin:0!important}
html body .tickets .nv-tl .table{margin:0!important}
.nv-sup{position:relative;border-radius:34px 34px 34px 10px;padding:26px;margin-bottom:6px;overflow:hidden;
  background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--nv-v) 34%,transparent),transparent 60%),radial-gradient(80% 120% at 0% 100%,color-mix(in srgb,var(--nv-f) 24%,transparent),transparent 60%),var(--card-solid);
  border:1.5px solid color-mix(in srgb,var(--nv-v) 45%,transparent);box-shadow:0 40px 80px -44px var(--nv-glow-v)}
.nv-sup__head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.nv-sup__head h2{margin:8px 0 4px;font-size:30px;font-weight:900;letter-spacing:-.02em;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nv-sup__head p{margin:0;color:var(--text-muted);font-size:14px;font-weight:600}
.nv-sup__badge{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:99px 99px 99px 4px;font-size:12px;font-weight:800;background:color-mix(in srgb,#22c55e 16%,transparent);color:#22c55e;border:1px solid color-mix(in srgb,#22c55e 40%,transparent)}
.nv-sup__badge i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88;animation:nvLive 2s infinite}
@keyframes nvLive{70%{box-shadow:0 0 0 9px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}
.nv-sup__orb{position:relative;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--nv-mix);box-shadow:0 20px 44px -14px var(--nv-glow-v)}
.nv-sup__orb svg{width:44px;height:44px;position:relative;z-index:2}
.nv-sup__orb span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--nv-v2);opacity:0;animation:nvRipple 3.6s ease-out infinite}
.nv-sup__orb span:nth-child(2){animation-delay:1.2s}.nv-sup__orb span:nth-child(3){animation-delay:2.4s}
@keyframes nvRipple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.nv-sup__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.nv-ch{--c:var(--nv-v);--c2:var(--nv-v2);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;cursor:pointer;font:inherit;color:var(--text-main)!important;text-decoration:none!important;
  padding:20px 20px 18px;border-radius:26px 26px 26px 8px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--c) 38%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 13%,var(--card-solid)),var(--card-solid));transition:transform .4s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s,border-color .3s}
.nv-ch::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;inset-inline-end:-46px;top:-46px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 40%,transparent),transparent 70%);transition:transform .5s}
.nv-ch:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--c);box-shadow:0 34px 60px -26px color-mix(in srgb,var(--c) 70%,transparent)}
.nv-ch:hover::before{transform:scale(1.6)}
.nv-ch__i{position:relative;z-index:1;width:62px;height:62px;border-radius:20px 20px 20px 7px;display:grid;place-items:center;color:#fff;margin-bottom:10px;background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 16px 30px -12px var(--c);transition:transform .45s cubic-bezier(.2,.9,.3,1.6)}
.nv-ch:hover .nv-ch__i{transform:rotate(-10deg) scale(1.12)}
.nv-ch__i svg{width:32px;height:32px}
.nv-ch strong{position:relative;z-index:1;font-size:17px;font-weight:900}
.nv-ch small{position:relative;z-index:1;font-size:12px;color:var(--text-muted);font-weight:600;line-height:1.5}
.nv-ch em{position:relative;z-index:1;margin-top:12px;font-style:normal;font-size:12px;font-weight:900;color:#fff;padding:7px 14px;border-radius:99px 99px 99px 4px;background:linear-gradient(135deg,var(--c),var(--c2))}
.nv-ch em::after{content:" \2190";display:inline-block;transition:transform .3s}
.nv-ch:hover em::after{transform:translateX(-5px)}
.nv-ch--wa{--c:#25D366;--c2:#128C7E}.nv-ch--tg{--c:#2AABEE;--c2:#229ED9}.nv-ch--hu{--c:var(--nv-f);--c2:var(--nv-f2)}.nv-ch--ai{--c:var(--nv-v);--c2:var(--nv-v2)}
.nv-ch.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)}
.nv-seg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.nv-seg2 button{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:20px 20px 20px 6px;cursor:pointer;font:inherit;font-size:13px;font-weight:800;text-align:start;color:var(--text-main);background:var(--card-solid);border:1.5px solid color-mix(in srgb,var(--nv-v) 28%,transparent);transition:transform .3s,border-color .3s,box-shadow .3s,background .3s}
.nv-seg2 button b{width:40px;height:40px;flex:none;border-radius:14px 14px 14px 5px;display:grid;place-items:center;background:var(--main-opacity);color:var(--nv-v)}
.nv-seg2 button b svg{width:22px;height:22px}
.nv-seg2 button:hover{transform:translateY(-3px);border-color:var(--nv-f)}
.nv-seg2 button.on{background:var(--nv-mix);color:#fff;border-color:transparent;box-shadow:0 16px 32px -14px var(--nv-glow)}
.nv-seg2 button.on b{background:rgba(255,255,255,.22);color:#fff}
@media (max-width:640px){.nv-sup{padding:18px}.nv-sup__orb{display:none}.nv-sup__head h2{font-size:24px}}
/* ============ levels card v2 ============ */
.nv-lv{position:relative;border-radius:26px 26px 26px 8px;padding:22px 20px 20px;margin-bottom:18px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--nv-f) 55%,transparent),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--nv-v) 70%,#000),color-mix(in srgb,var(--nv-v) 38%,#000));
  box-shadow:0 26px 50px -28px var(--nv-glow-v)}
.nv-lv::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);transform:translateX(-120%);animation:nvLvShine 6s ease-in-out infinite}
@keyframes nvLvShine{55%,100%{transform:translateX(120%)}}
.nv-lv__t{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900}
.nv-lv__t i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.nv-lv__s{margin:6px 0 22px;font-size:12.5px;font-weight:600;opacity:.85}
.nv-lv__track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);align-items:start}
.nv-lv__line{position:absolute;inset-inline:10%;top:23px;height:4px;border-radius:4px;background:rgba(255,255,255,.22)}
.nv-lv__line span{display:block;height:100%;width:8%;border-radius:4px;background:#fff;box-shadow:0 0 14px #fff;animation:nvLvFill 3.5s ease-in-out infinite alternate}
@keyframes nvLvFill{to{width:34%}}
.nv-lv__m{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:800;opacity:.82;animation:nvLvUp .7s both;animation-delay:calc(var(--i) * .1s)}
@keyframes nvLvUp{from{transform:translateY(12px);opacity:0}}
.nv-lv__m b{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:900;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);transition:transform .35s cubic-bezier(.2,.9,.3,1.6)}
.nv-lv__m b svg{width:22px;height:22px;color:#ffd45e}
.nv-lv__m:hover b{transform:translateY(-5px) scale(1.1)}
.nv-lv__m.on{opacity:1}.nv-lv__m.on b{background:#fff;color:var(--nv-v);border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.2),0 12px 26px -8px rgba(0,0,0,.5)}
.nv-lv__m:last-child b{background:linear-gradient(135deg,#ffd45e,var(--nv-f));border-color:#fff}

/* ============ affiliates ============ */
html body .affiliates .container{max-width:1100px}
html body .affiliates .header{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:24px 26px;margin:0 0 18px;border-radius:30px 30px 30px 9px;overflow:hidden;
  background:radial-gradient(100% 160% at 100% 0%,color-mix(in srgb,var(--nv-f) 40%,transparent),transparent 62%),linear-gradient(150deg,color-mix(in srgb,var(--nv-v) 72%,#000),color-mix(in srgb,var(--nv-v) 40%,#000));box-shadow:0 34px 64px -34px var(--nv-glow-v)}
html body .affiliates .header h2{margin:0;color:#fff!important;font-size:26px;font-weight:900;flex:1 1 220px;-webkit-text-fill-color:#fff}
html body .affiliates .header p{margin:0;color:rgba(255,255,255,.82)!important;font-size:13.5px;font-weight:600;flex:1 1 100%}
.nv-aff-ic{width:64px;height:64px;border-radius:22px 22px 22px 8px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.45);color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.08);animation:nvFloat 4s ease-in-out infinite}
.nv-aff-ic svg{width:32px;height:32px}
@keyframes nvFloat{50%{transform:translateY(-6px) rotate(-4deg)}}
html body .affiliates .cards{display:grid;gap:18px}
html body .affiliates .card{padding:22px!important;margin:0!important}
.nv-tic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border-radius:15px 15px 15px 5px;background:var(--nv-mix);color:#fff;box-shadow:0 14px 26px -12px var(--nv-glow);transition:transform .4s cubic-bezier(.2,.9,.3,1.6)}
.nv-tic svg{width:21px;height:21px}
.nv-one td:hover .nv-tic{transform:rotate(-10deg) scale(1.12)}
.nv-tcards.nv-one td.td_link .nv-tic{display:none}
.nv-tcards.nv-one td.td_link{padding:14px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 14%,var(--card-solid)),color-mix(in srgb,var(--nv-f) 9%,var(--card-solid)))!important}
.nv-tcards.nv-one td.td_link .ref-link{display:flex;align-items:center;gap:12px;margin-top:6px}
.nv-tcards.nv-one td.td_link .ref-link .value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start;font-weight:800;padding:12px 14px;border-radius:14px;background:var(--main-opacity);border:1px dashed color-mix(in srgb,var(--nv-v) 50%,transparent)}
.nv-tcards.nv-one td.td_link .copy-btn{flex:none;padding:12px 22px;border-radius:14px 14px 14px 5px;border:0;cursor:pointer;font-weight:900;color:#fff;background:var(--nv-mix);box-shadow:0 14px 26px -12px var(--nv-glow);transition:transform .3s,box-shadow .3s}
.nv-tcards.nv-one td.td_link .copy-btn:hover{transform:translateY(-3px) scale(1.04)}

/* ============ every card: glow + shadow + hover ============ */
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.api .example,.nv-tl .table tbody tr,.blog .post,.blog .item,.child-panel .card,.updates .card){
  box-shadow:0 22px 50px -30px var(--nv-glow-v),0 0 0 1px color-mix(in srgb,var(--nv-v) 10%,transparent)!important;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2),box-shadow .4s,border-color .3s}

/* sidebar: air between user card and logout */
@media (min-width:992px){
  html body .sidebar-body .user-box{margin:8px 4px 14px!important}
  html body .sidebar-body .sidebar-logout-btn{margin-top:4px!important}
}html body .nv-tcards.nv-one tbody tr{border:0!important;background:none!important;box-shadow:none!important;outline:0!important;padding:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
html body .nv-tcards.nv-one tbody tr:has(td.td_link){grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:760px){html body .nv-tcards.nv-one tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body .nv-tcards.nv-one td.td_link .copy-btn{color:#fff!important;font-size:13px;opacity:1!important;-webkit-text-fill-color:#fff}
html body .nv-tcards.nv-one td{display:flex!important;flex-direction:column;align-items:flex-start}html body .order-info .nv-lv .nv-lv__m{display:flex!important;flex-direction:column!important;align-items:center!important;min-width:0}
html body .order-info .nv-lv .nv-lv__m span{display:block!important;width:100%;text-align:center!important;font-size:11px!important;white-space:nowrap;color:#fff!important;margin:0!important;padding:0!important;background:none!important}
html body .order-info .nv-lv .nv-lv__t,html body .order-info .nv-lv .nv-lv__s{color:#fff!important;text-align:start!important}
/* ============ music player v2 ============ */
html body .sidebar-music-player{position:relative;border-radius:22px 22px 22px 7px!important;padding:12px!important;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 26%,var(--card-solid)),color-mix(in srgb,var(--nv-f) 16%,var(--card-solid)))!important;border:1px solid color-mix(in srgb,var(--nv-v) 45%,transparent)!important;box-shadow:0 18px 36px -22px var(--nv-glow-v)}
html body .sidebar-music-player .music-cover{width:44px!important;height:44px!important;border-radius:15px 15px 15px 5px!important;display:grid!important;place-items:center;background:var(--nv-mix)!important;box-shadow:0 12px 24px -10px var(--nv-glow)}
.nv-eq{display:flex;align-items:flex-end;gap:3px;height:22px}
.nv-eq i{display:block;width:4px;height:6px;border-radius:3px;background:#fff;transform-origin:bottom}
.nv-playing .nv-eq i{animation:nvEq 0.9s ease-in-out infinite}
.nv-eq i:nth-child(2){animation-delay:-.2s!important}.nv-eq i:nth-child(3){animation-delay:-.45s!important}.nv-eq i:nth-child(4){animation-delay:-.1s!important}.nv-eq i:nth-child(5){animation-delay:-.65s!important}
@keyframes nvEq{0%,100%{height:5px}50%{height:22px}}
html body .sidebar-music-player .music-play{background:var(--nv-mix)!important;color:#fff!important;box-shadow:0 12px 22px -8px var(--nv-glow)}
html body .sidebar-music-player .music-play:hover{transform:scale(1.1)}
/* ============ hero banner (pages without one) ============ */
.nv-hero{position:relative;display:flex;align-items:center;gap:18px;padding:22px 26px;margin:0 0 20px;border-radius:30px 30px 30px 9px;overflow:hidden;color:#fff;
  background:radial-gradient(100% 160% at 100% 0%,color-mix(in srgb,var(--nv-f) 42%,transparent),transparent 62%),linear-gradient(150deg,color-mix(in srgb,var(--nv-v) 74%,#000),color-mix(in srgb,var(--nv-v) 42%,#000));box-shadow:0 34px 64px -34px var(--nv-glow-v)}
.nv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);transform:translateX(-120%);animation:nvLvShine 7s ease-in-out infinite;pointer-events:none}
.nv-hero__i{flex:none;width:62px;height:62px;border-radius:22px 22px 22px 8px;display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.45);box-shadow:0 0 0 8px rgba(255,255,255,.08);animation:nvFloat 4s ease-in-out infinite}
.nv-hero__i *{color:#fff!important;fill:currentColor}
.nv-hero h2{margin:0 0 4px;font-size:25px;font-weight:900;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
.nv-hero p{margin:0;font-size:13.5px;font-weight:600;opacity:.88;color:#fff!important}
html body .nv-has-hero>.page-title,html body .nv-has-hero .massorder>.page-title,html body .nv-has-hero h1.page-title,html body .nv-has-hero .page-title{display:none!important}

/* ============ key/value tables -> glowing rows ============ */
html body table.nv-kv{border-collapse:separate!important;border-spacing:0 10px!important;width:100%;background:none!important;border:0!important}
html body table.nv-kv tbody{display:block}
html body table.nv-kv tr{display:flex!important;align-items:center;gap:14px;padding:14px 18px;border-radius:18px 18px 18px 6px;background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 12%,var(--card-solid)),var(--card-solid))!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 34%,transparent)!important;box-shadow:0 16px 34px -24px var(--nv-glow-v);transition:transform .3s,border-color .3s,box-shadow .3s}
html body table.nv-kv tr:hover{transform:translateY(-3px);border-color:var(--nv-f)!important;box-shadow:0 22px 42px -20px var(--nv-glow-v),0 0 26px -8px var(--nv-glow)}
html body table.nv-kv td{display:block!important;border:0!important;background:none!important;padding:0!important;color:var(--text-main)!important}
html body table.nv-kv td:first-child{flex:none;min-width:130px;font-weight:900;color:var(--nv-v2)!important}
html body table.nv-kv td:last-child{flex:1;min-width:0;overflow-wrap:anywhere;direction:ltr;text-align:start}
/* ============ top bar = same glass panel as the sidebar head, same line ============ */
@media (min-width:992px){
  html body .page-header{position:sticky!important;top:12px!important;margin:12px 14px 0!important;height:92px!important;min-height:92px!important;padding-inline:22px!important;border-radius:30px!important;
    border:1px solid color-mix(in srgb,var(--nv-v) 38%,transparent)!important;
    background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--nv-v) 22%,transparent),transparent 70%),var(--card-solid)!important;
    box-shadow:0 30px 60px -36px var(--nv-glow-v)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  html body .page-header::after{display:none!important}
  html body .page-content>.content{padding-top:18px!important}
}html body .sidebar-music-player .music-cover{background:none!important;box-shadow:none!important;width:46px!important;height:46px!important;border-radius:50%!important;padding:0}
.nv-disc{width:46px;height:46px;border-radius:50%;filter:drop-shadow(0 8px 14px var(--nv-glow))}
.nv-playing .nv-disc{animation:nvSpin 3.2s linear infinite}
@keyframes nvSpin{to{transform:rotate(360deg)}}
/* sidebar user card: bigger name + discount */
html body .sidebar-body .user-box .username{font-size:19px!important;font-weight:900!important;letter-spacing:-.01em;line-height:1.2}
html body .sidebar-body .user-box .username .verified-badge{font-size:18px!important}
html body .sidebar-body .user-box .level{font-size:14px!important;font-weight:900!important;padding:6px 14px!important;border-radius:99px 99px 99px 4px!important;gap:6px}
html body .sidebar-body .user-box .level i{font-size:17px!important}
html body .sidebar-body .user-box .level span{font-size:14px!important}
/* ============ history rows (add funds / tickets): one clean line ============ */
html body .lists .nv-tcards tbody tr,html body .tickets .nv-tcards tbody tr{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:16px!important;padding:14px 18px!important;border-radius:20px 20px 20px 7px!important}
html body .lists .nv-tcards td,html body .tickets .nv-tcards td{flex:1 1 0!important;min-width:0;padding:2px 0!important;border:0!important}
html body .lists .nv-tcards td *,html body .tickets .nv-tcards td *{border:0!important;box-shadow:none}
html body .lists .nv-tcards td::after,html body .tickets .nv-tcards td::after{display:none!important}
html body .lists .nv-tcards td:first-child{flex:0 0 70px!important}
html body .lists .nv-tcards td:first-child{font-weight:900;color:var(--nv-v2)}
html body .lists .nv-tcards td.invoice:not(:has(*)){display:none!important}
html body .lists .nv-tcards td .amount{font-size:20px;font-weight:900;background:var(--nv-mix);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body .lists .nv-tcards td.list_method{font-weight:800}
html body .tickets .nv-tcards td .ticket-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
html body .tickets .nv-tcards td:first-child{flex:0 0 56px!important}

/* ============ sidebar user card: wider text, not bigger ============ */
@media (min-width:992px){
  html body .sidebar-body .user-box{padding:10px 12px!important;gap:10px!important;grid-template-columns:auto minmax(0,1fr)!important}
  html body .sidebar-body .user-box .user-avatar{width:42px!important;height:42px!important}
  html body .sidebar-body .user-box .username{font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  html body .sidebar-body .user-box .level{font-size:12.5px!important;white-space:nowrap!important;padding:4px 10px!important;width:fit-content}
  html body .sidebar-body .user-box .level span{font-size:12.5px!important;white-space:nowrap}
  html body .sidebar-body .user-box .level i{font-size:14px!important}
}
/* affiliates: label and value on ONE line inside each tile */
html body .affiliates .nv-tcards.nv-one td:not(.td_link){flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:12px!important;padding:14px 18px!important}
html body .affiliates .nv-tcards.nv-one td:not(.td_link)::before{order:2;flex:1 1 auto;margin:0!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;font-weight:800!important;color:var(--text-light)!important;white-space:nowrap}
html body .affiliates .nv-tcards.nv-one td:not(.td_link) .nv-tic{order:1;margin:0!important;flex:none}
html body .affiliates .nv-tcards.nv-one td:not(.td_link)>:not(.nv-tic){order:3;white-space:nowrap;flex:none}
html body .affiliates .nv-tcards.nv-one tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .affiliates .nv-tcards.nv-one td .money{font-size:21px}

/* ============ sidebar user card: icon + name on one row, wide square-cut discount block below ============ */
@media (min-width:992px){
  html body .sidebar-body .user-box{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"av name" "lv lv";align-items:center;gap:10px 12px!important;padding:14px!important;border-radius:20px!important}
  html body .sidebar-body .user-box .user-avatar{grid-area:av;width:54px!important;height:54px!important;margin:0!important}
  html body .sidebar-body .user-box .username{grid-area:name;display:flex!important;align-items:center;gap:8px;margin:0!important;min-width:0;padding:12px 14px;border-radius:10px!important;font-size:16px!important;font-weight:900!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:color-mix(in srgb,var(--nv-v) 16%,transparent);border:1px solid color-mix(in srgb,var(--nv-v) 45%,transparent)}
  html body .sidebar-body .user-box .level{grid-area:lv;display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%!important;margin:0!important;padding:11px 14px!important;border-radius:10px!important;font-size:15px!important;font-weight:900!important;white-space:nowrap;
    background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 30%,transparent),color-mix(in srgb,var(--nv-f) 22%,transparent))!important;border:1px solid color-mix(in srgb,var(--nv-f) 50%,transparent)!important;color:var(--text-main)!important}
  html body .sidebar-body .user-box .level span,html body .sidebar-body .user-box .level i{font-size:15px!important}
}
/* ============ folded sidebar (toggle button): fully hidden, content + top bar take the full width ============ */
@media (min-width:992px){
  html body.sidebar-folded:not(.open-sidebar-folded) .sidebar{width:0!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;visibility:hidden;box-shadow:none!important}
  html body.sidebar-folded .main-wrapper .page-content{width:100%!important;margin-inline-start:0!important}
  html body.sidebar-folded .page-header{width:auto!important;margin:12px 14px 0!important}
}

/* ============ sidebar re-open button (only while folded) ============ */
.nv-sb-open{display:none;position:fixed;top:24px;inset-inline-end:22px;z-index:60;width:48px;height:48px;border-radius:16px 16px 16px 5px;border:1.5px solid color-mix(in srgb,var(--nv-v) 55%,transparent);cursor:pointer;color:#fff;background:var(--nv-mix);box-shadow:0 16px 30px -12px var(--nv-glow)}
.nv-sb-open svg{width:22px;height:22px}
@media (min-width:992px){html body.sidebar-folded:not(.open-sidebar-folded) .nv-sb-open{display:grid;place-items:center}}
/* balance card button: themed gradient instead of plain white */
html body .main-boxes .stat-card.balance .add-balance-btn,html body .new-order .main-boxes .add-balance-btn{background:var(--nv-mix)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important;box-shadow:0 14px 28px -12px var(--nv-glow)!important}
html body .main-boxes .stat-card.balance .add-balance-btn:hover{transform:translateY(-3px);filter:brightness(1.12)}
/* ============ phones: the four top cards as a 2 x 2 grid ============ */
@media (max-width:620px){
  html body .main-boxes .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html body .main-boxes .stat-card,html body .new-order .main-boxes .stat-card{min-height:0!important;padding:12px 12px 12px!important;border-radius:20px 20px 20px 6px!important}
  html body .main-boxes .stat-card .card-header{margin-bottom:4px!important;gap:6px}
  html body .main-boxes .stat-card .card-label,html body .main-boxes .stat-card .card-label span{font-size:10.5px!important;letter-spacing:0!important}
  html body .main-boxes .stat-card .icon-box{width:30px!important;height:30px!important;font-size:13px!important;border-radius:10px 10px 10px 4px!important}
  html body .main-boxes .stat-card .card-value{font-size:20px!important;margin:0!important}
  html body .main-boxes .stat-card .card-meta{font-size:9.5px!important;padding:3px 7px!important}
  html body .main-boxes .stat-card .nv-spark,html body .main-boxes .stat-card .nv-bars{position:static!important;width:100%!important;height:26px!important;margin-top:6px!important}
  html body .stat-card.orange .nv-ring2{width:58px!important;height:58px!important;margin:2px auto 0!important}
  html body .stat-card.orange .nv-ring2 b{font-size:12px!important}
  html body .main-boxes .stat-card .level-badge{font-size:9.5px!important;padding:3px 7px!important}
  /* balance card in half width */
  html body .main-boxes .stat-card.balance .balance-row h3{font-size:14px!important}
  html body .main-boxes .stat-card.balance .nv-wc{transform:scale(.7);transform-origin:right center;margin:-4px 0}
  html body .main-boxes .stat-card.balance .nv-wc__brand{display:none!important}
  html body .main-boxes .stat-card.balance .add-balance-btn{padding:7px 8px!important;font-size:11px!important}
  html body .main-boxes .stat-card.balance .icon-btn-sm{width:28px!important;height:28px!important}
}
/* desktop: four equal cards side by side; tablet: 2 x 2 */
@media (min-width:1100px){html body .main-boxes .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (min-width:621px) and (max-width:1099px){html body .main-boxes .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* phones/tablets: the closed drawer must never widen the page */
@media (max-width:991px){
  html,html body{overflow-x:hidden!important;max-width:100vw}
  html body:not(.sidebar-open):not(.open-sidebar) .sidebar{display:none!important}
  html body .main-wrapper,html body .page-content{max-width:100vw}
}@media (max-width:1099px){html body .main-boxes .stats-grid>.stat-card,html body .main-boxes .stats-grid>.stat-card.balance{grid-column:auto!important;grid-row:auto!important}}
@media (max-width:1099px){html body .main-boxes .stats-grid>.stat-card.balance{order:-1}}.nv-sb-open{inset-inline-end:auto!important;inset-inline-start:22px!important}
html[dir="ltr"] .nv-sb-open{inset-inline-start:auto!important;inset-inline-end:22px!important}
/* card height = its content (no forced min-height, no stretched inner blocks) */
html body .main-boxes .stat-card,html body .new-order .main-boxes .stat-card,html body .new-order .main-boxes .stats-grid .stat-card.balance{min-height:0!important;height:auto!important}
html body .main-boxes .stat-card .card-content{height:auto!important;min-height:0!important}
html body .main-boxes .stat-card.balance .card-content{display:flex!important;flex-direction:column;gap:8px!important;justify-content:flex-start!important}
html body .main-boxes .stat-card.balance .balance-row{flex:0 0 auto!important;height:auto!important;min-height:0!important;margin:0!important}
html body .stat-card.orange .nv-ring2{width:84px!important;height:84px!important;margin:6px auto 0!important}
html body .stat-card .nv-spark{position:static!important;width:100%!important;height:40px!important;margin-top:8px!important}
html body .stat-card .nv-bars{position:static!important;width:100%!important;height:40px!important;margin-top:8px!important}html body .main-boxes .stat-card .card-meta{margin-bottom:0!important}
html body .main-boxes .stat-card .card-value{margin-bottom:6px!important}
html body .main-boxes .stat-card .card-content{justify-content:flex-start!important;gap:6px!important}
/* ============ KPI visuals fill the card (bigger charts / ring) ============ */
html body .main-boxes .stat-card:not(.balance) .card-content{display:flex!important;flex-direction:column!important;flex:1 1 auto}
html body .main-boxes .stat-card:not(.balance){display:flex!important;flex-direction:column}
html body .main-boxes .stat-card:not(.balance) .nv-spark{flex:1 1 96px!important;min-height:96px!important;height:auto!important;width:100%!important;margin-top:10px!important;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--nv-f) 10%,transparent),transparent)}
html body .main-boxes .stat-card:not(.balance) .nv-spark path{vector-effect:non-scaling-stroke;stroke-width:3.2!important}
html body .main-boxes .stat-card:not(.balance) .nv-bars{flex:1 1 96px!important;min-height:96px!important;height:auto!important;width:100%!important;margin-top:10px!important;display:flex!important;align-items:flex-end!important;gap:6px!important}
html body .main-boxes .stat-card:not(.balance) .nv-bars i{flex:1;border-radius:6px 6px 3px 3px}
html body .stat-card.orange .nv-ring2{flex:none!important;width:124px!important;height:124px!important;margin:10px auto 0!important}
html body .stat-card.orange .nv-ring2::before{inset:11px!important}
html body .stat-card.orange .nv-ring2 b{font-size:24px!important}
html body .main-boxes .stat-card.orange .nv-spark{display:none!important}html body .main-boxes .stat-card.success .nv-spark{display:none!important}
html body .main-boxes .stat-card:not(.balance) .nv-spark,html body .main-boxes .stat-card:not(.balance) .nv-bars{flex:1 1 78px!important;min-height:78px!important;max-height:110px}
html body .stat-card.orange .nv-ring2{width:104px!important;height:104px!important}
html body .stat-card.orange .nv-ring2 b{font-size:21px!important}
/* min / max line under the quantity field: a little lower, as a tidy pill */
html body .help-block.min-max,html body small.min-max{display:inline-block!important;margin-top:12px!important;padding:6px 14px!important;border-radius:99px 99px 99px 4px;background:var(--main-opacity);color:var(--text-light)!important;font-size:12px!important;font-weight:800;line-height:1.4}
/* no light frame around card lists */
html body .table-responsive.nv-tw,html body .nv-tw{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;outline:0!important}
html body table.nv-tcards{border:0!important;outline:0!important}
/* child panel form: fields inside the card with proper padding, smaller labels */
html body .tab-content .store-form{padding:24px 22px 22px!important}
html body .store-form .store-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}
html body .store-form .store-field{min-width:0}
html body .store-form .store-field label,html body .store-form label{display:block;font-size:13px!important;font-weight:800!important;margin:0 2px 8px!important;color:var(--text-light)!important;line-height:1.4}
html body .store-form input,html body .store-form select{height:48px!important;width:100%}
html body .store-form button[type=submit],html body .store-form .store-submit{margin-top:6px}
/* browser autofill must not paint inputs white */
html body input:-webkit-autofill,html body input:-webkit-autofill:focus,html body textarea:-webkit-autofill,html body select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--card-solid) inset!important;box-shadow:0 0 0 1000px var(--card-solid) inset!important;-webkit-text-fill-color:var(--text-main)!important;caret-color:var(--text-main);transition:background-color 99999s ease-in-out 0s}
/* ============ neon glow on every card + stronger glow & lift on hover ============ */
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.main-boxes .stat-card,.orders-grid>*,.refunds-grid>*,.refill-grid>*,.subscriptions-grid>*,.nv-tcards tbody tr,.api .example,.nv-ch,.nv-sup,.platform-filter .brand-category,.faq-item,.accordion-item){
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nv-f) 55%,transparent),0 0 24px -2px color-mix(in srgb,var(--nv-f) 38%,transparent),0 18px 50px -22px color-mix(in srgb,var(--nv-v) 80%,transparent)!important;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s,border-color .3s!important}
html:not(.dark) body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.main-boxes .stat-card,.orders-grid>*,.nv-tcards tbody tr,.api .example,.nv-ch,.platform-filter .brand-category){
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nv-v) 45%,transparent),0 14px 38px -14px color-mix(in srgb,var(--nv-v) 45%,transparent)!important}
/* ============ softer glow + calm hover (overrides the stronger neon above) ============ */
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.main-boxes .stat-card,.orders-grid>*,.refunds-grid>*,.refill-grid>*,.subscriptions-grid>*,.nv-tcards tbody tr,.api .example,.nv-ch,.nv-sup,.platform-filter .brand-category,.faq-item,.accordion-item),html body .nv-glow{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nv-f) 28%,transparent),0 0 14px -4px color-mix(in srgb,var(--nv-f) 20%,transparent),0 14px 34px -22px color-mix(in srgb,var(--nv-v) 60%,transparent)!important}
/* ============ our other sites strip ============ */
.nv-sites{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 16px;border-radius:24px 24px 24px 8px;background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 12%,var(--card-solid)),var(--card-solid));border:1.5px solid color-mix(in srgb,var(--nv-v) 40%,transparent)}
.nv-sites__t{font-size:12px;font-weight:900;color:var(--text-light);letter-spacing:.06em;padding-inline-end:6px}
.nv-site{flex:1 1 170px;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:16px 16px 16px 5px;text-decoration:none!important;color:var(--text-main)!important;background:var(--main-opacity);border:1px solid color-mix(in srgb,var(--nv-v) 32%,transparent);transition:transform .25s,border-color .25s,box-shadow .25s,background .25s;min-width:0}
.nv-site i{flex:none;width:38px;height:38px;border-radius:13px 13px 13px 4px;display:grid;place-items:center;color:#fff;background:var(--nv-mix);box-shadow:0 10px 20px -10px var(--nv-glow);transition:transform .35s cubic-bezier(.2,.9,.3,1.5)}
.nv-site i svg{width:19px;height:19px}
.nv-site span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.nv-site b{font-size:13.5px;font-weight:900;white-space:nowrap}
.nv-site small{font-size:10.5px;font-weight:700;color:var(--text-muted);direction:ltr;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-site:hover{transform:translateY(-2px);border-color:var(--nv-f);box-shadow:0 12px 26px -14px var(--nv-glow-v)}
.nv-site:hover i{transform:rotate(-8deg) scale(1.08)}
@media (max-width:620px){.nv-site{flex:1 1 calc(50% - 8px)}.nv-sites__t{flex:1 1 100%}}
/* ============ top bar fixed in place (never scrolls away) ============ */
@media (min-width:992px){
  html body .page-header{position:fixed!important;top:12px!important;margin:0!important;z-index:900!important;
    inset-inline-start:calc(var(--sbw) + 14px)!important;inset-inline-end:14px!important;width:auto!important}
  html body.sidebar-folded .page-header{inset-inline-start:14px!important}
  html body .page-content>.content,html body .main-wrapper .content{padding-top:124px!important}
}

/* ============ New order: four top cards much shorter ============ */
html body .main-boxes .stat-card:not(.balance) .nv-spark,html body .main-boxes .stat-card:not(.balance) .nv-bars{flex:0 0 44px!important;min-height:44px!important;max-height:44px!important;height:44px!important;margin-top:8px!important}
html body .stat-card.orange .nv-ring2{width:72px!important;height:72px!important;margin:4px auto 0!important}
html body .stat-card.orange .nv-ring2::before{inset:8px!important}
html body .stat-card.orange .nv-ring2 b{font-size:15px!important}
html body .main-boxes .stat-card:not(.balance) .card-value{font-size:28px!important;margin:2px 0 4px!important}
html body .main-boxes .stat-card{padding:14px 16px!important}
html body .main-boxes .stat-card.balance .nv-wc{display:none!important}
html body .main-boxes .stat-card.balance .card-content{gap:6px!important}

/* sites strip: all five in one row on wide screens */
@media (min-width:1100px){.nv-sites{flex-wrap:nowrap}.nv-site{flex:1 1 0;padding:8px 10px}.nv-site b{font-size:12.5px}.nv-site i{width:34px;height:34px}}
/* add funds: the "instructions" label must be readable; no light frame around lists */
html body .form-group.instruction>.control-label,html body .instruction .control-label{display:inline-block!important;font-size:14px!important;font-weight:900!important;color:var(--text-main)!important;letter-spacing:0!important;background:var(--main-opacity);padding:5px 14px;border-radius:99px 99px 99px 4px;margin:0 0 10px!important}
html body main .table-responsive.nv-tw.nv-tw,html body main .lists.table-responsive{border:0!important;border-width:0!important;background:none!important;box-shadow:none!important}
/* payment card keeps its own colours - no theme frame on top of it */
html body .nv-vp,html body [id^="vikingpay-"]{border:0!important;box-shadow:none!important}html body main .page-content .form-group.instruction>label.control-label,html body main .page-content .instruction label{position:static!important;transform:none!important;display:inline-block!important;font-size:14px!important;font-weight:900!important;color:var(--text-main)!important;background:var(--main-opacity)!important;padding:5px 14px!important;border-radius:99px 99px 99px 4px!important;margin:6px 0 12px!important;line-height:1.5!important;opacity:1!important}
/* cards: no colour change / movement on mouse-over (the glow stays as it is) */
:root,html.dark{--nv-edge-hover:var(--nv-edge);--nv-shadow-hover:var(--nv-shadow)}
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.stat-card,.order-card,.refill-card,.refund-card,.subscription-card,.drip-feed-card,.method-card,.feat-card,.category-box,.orders-grid>*,.nv-tcards tbody tr,.api .example,.nv-ch,.nv-glow,.accordion-item,.faq-item):hover{transform:none!important}
.nv-fx::after{display:none!important}
/* sidebar logo fills the header area */
@media (min-width:992px){
  html body .sidebar .sidebar-header{padding:0 14px!important;gap:8px}
  html body .sidebar .sidebar-header .brand{flex:1 1 auto;display:flex!important;align-items:center;justify-content:center;height:100%;min-width:0;padding:6px 0}
  html body .sidebar .sidebar-header .brand img{width:auto!important;height:auto!important;max-height:82px!important;max-width:100%!important;min-height:0;object-fit:contain;display:block}
}
/* animated WhatsApp / Spotify tile icons */
.nv-ani{width:100%;height:100%;display:block;overflow:visible}
.nv-ani .r{transform-origin:24px 24px;animation:nvRing 2.2s ease-out infinite}
@keyframes nvRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.nv-ani--wa .ph{transform-origin:24px 26px;animation:nvPhone 2.6s ease-in-out infinite}
@keyframes nvPhone{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-12deg)}72%{transform:rotate(11deg)}78%{transform:rotate(-8deg)}84%{transform:rotate(6deg)}90%{transform:rotate(0)}}
.nv-ani--sp .a1,.nv-ani--sp .a2,.nv-ani--sp .a3{animation:nvWave 1.6s ease-in-out infinite;transform-origin:24px 24px}
.nv-ani--sp .a2{animation-delay:.2s}.nv-ani--sp .a3{animation-delay:.4s}
@keyframes nvWave{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.35;transform:translateY(-1.5px)}}
html body .platform-filter .brand-category .filter-icon:has(.nv-ani){background:transparent!important;padding:0!important}
@media (prefers-reduced-motion:reduce){.nv-ani .r,.nv-ani .ph,.nv-ani .a1,.nv-ani .a2,.nv-ani .a3{animation:none}}
/* ============ the three floating buttons (support / Telegram / WhatsApp): rounded-square glass-gradient look ============ */
html .sv-bot4-button,html body .telegram-button,html body .whatsapp-button{
  position:relative!important;width:56px!important;height:56px!important;border-radius:20px 20px 20px 7px!important;border:1.5px solid rgba(255,255,255,.35)!important;
  display:grid!important;place-items:center;padding:0!important;color:#fff!important;transform:none!important;overflow:visible!important;
  box-shadow:0 14px 28px -10px var(--c,var(--nv-v)),0 0 0 4px color-mix(in srgb,var(--c,var(--nv-v)) 22%,transparent)!important;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s!important}
html .sv-bot4-button{--c:var(--nv-v);background:linear-gradient(135deg,var(--nv-v2),var(--nv-v) 55%,var(--nv-f))!important}
html body .telegram-button{--c:#229ED9;background:linear-gradient(135deg,#43C0F4,#229ED9 60%,#1678b4)!important}
html body .whatsapp-button{--c:#25D366;background:linear-gradient(135deg,#5BE88F,#25D366 55%,#128C7E)!important}
html body .telegram-button::after,html body .whatsapp-button::after{display:none!important}
html .sv-bot4-button::before,html body .telegram-button::before,html body .whatsapp-button::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--c);opacity:0;animation:nvFloatPulse 2.8s ease-out infinite;pointer-events:none}
html body .telegram-button::before{animation-delay:.9s}html body .whatsapp-button::before{animation-delay:1.8s}
@keyframes nvFloatPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
html .sv-bot4-button svg{width:27px!important;height:27px!important;stroke:#fff!important;fill:none!important}
html body .telegram-button svg,html body .whatsapp-button svg{width:34px!important;height:34px!important;fill:#fff!important}
html .sv-bot4-button:hover,html body .telegram-button:hover,html body .whatsapp-button:hover{transform:translateY(-4px) scale(1.06)!important;box-shadow:0 20px 34px -10px var(--c),0 0 0 5px color-mix(in srgb,var(--c) 30%,transparent)!important}
html body .integration-fixed{gap:12px!important}
@media (prefers-reduced-motion:reduce){html .sv-bot4-button::before,html body .telegram-button::before,html body .whatsapp-button::before{animation:none}}html .sv-bot4-button{width:56px!important;height:56px!important;min-width:56px;border-radius:20px 20px 20px 7px!important}html body .telegram-button,html body .whatsapp-button{inset:auto!important;margin:0!important}
/* ============ floating buttons: exactly the same size and the same gap, every screen ============ */
html body .integration-fixed.integration-fixed__bottom-left{position:fixed!important;left:24px!important;right:auto!important;top:auto!important;bottom:20px!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:14px!important;z-index:9999}
html body .integration-fixed.integration-fixed__bottom-left>*{margin:0!important;padding:0!important}
html .sv-bot4-button{left:24px!important;right:auto!important;top:auto!important;bottom:calc(20px + 56px * 2 + 14px * 2)!important}
@media (max-width:991px){
  html body .integration-fixed.integration-fixed__bottom-left{left:14px!important;bottom:calc(86px + env(safe-area-inset-bottom))!important;gap:12px!important}
  html body .sv-bot4-button,html body .telegram-button,html body .whatsapp-button{width:46px!important;height:46px!important;min-width:46px;border-radius:16px 16px 16px 6px!important}
  html body .telegram-button svg,html body .whatsapp-button svg{width:28px!important;height:28px!important}
  html .sv-bot4-button{width:46px!important;height:46px!important;border-radius:16px 16px 16px 6px!important;left:14px!important;bottom:calc(86px + env(safe-area-inset-bottom) + 46px * 2 + 12px * 2)!important}
  html .sv-bot4-button svg{width:23px!important;height:23px!important}
}

/* ============ phones: ONE compact top bar row: menu | balance | $ | AR | theme | bell ============ */
@media (max-width:620px){
  html body .page-header{position:sticky!important;top:0!important;z-index:900!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;height:60px!important;min-height:60px!important;padding:0 10px!important;margin:0!important;gap:6px!important;border-radius:0 0 22px 22px!important}
  html body .page-header .header-left{order:0;flex:none!important}
  html body .page-header .header-left .header-title{display:none!important}
  html body .page-header .header-right,html body .page-header .nv-tools{display:contents!important}
  html body .page-header .header-right>.dropdown{order:1;flex:1 1 auto;min-width:0}
  html body .page-header .nv-curbtn{order:2}
  html body .page-header .nv-dd[data-nv="lang"]{order:3}
  html body .page-header .nv-dd[data-nv="themes"]{order:4}
  html body .page-header .nv-dd[data-nv="bell"]{order:5}
  html body .page-header .nv-tb,html body .page-header .icon-btn{width:40px!important;height:40px!important;min-width:0!important;padding:0!important;flex:none}
  html body .page-header .nv-curbtn span{font-size:0!important}
  html body .page-header .nv-curbtn span::after{content:"$";font-size:16px;font-weight:900}
  html body .page-header .nv-tb .lbl{font-size:11px!important}
  html body .page-header .balance-box{width:100%!important;height:40px!important;padding:0 8px!important;gap:6px!important}
  html body .page-header .balance-box .wallet-icon{display:none!important}
  html body .page-header .balance-amount{max-width:none!important;font-size:12.5px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .page-content>.content{padding-top:14px!important}
}
/* tablets / narrow browser windows (621-991px): the top bar stays ONE tidy row */
@media (min-width:621px) and (max-width:991px){
  html body .page-header{height:auto!important;min-height:64px!important;padding:8px 12px!important;flex-wrap:nowrap!important;gap:8px!important;align-items:center}
  html body .page-header .header-left{flex:0 0 auto;min-width:0}
  html body .page-header .header-left .header-title{display:none!important}
  html body .page-header .header-right{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;min-width:0!important;flex:1 1 auto;justify-content:flex-start}
  html body .page-header .balance-box{min-width:0;padding-inline:10px!important}
  html body .page-header .balance-amount{max-width:24vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px!important}
  html body .page-header .nv-actions{flex-wrap:nowrap;gap:6px!important}
}
/* quick support links: one line each */
html body .quick-support__link,html body .quick-support__link *{white-space:nowrap!important}
@media (max-width:620px){
  html body .quick-support__links{display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%}
  html body .quick-support__link{flex:1 1 auto!important;justify-content:center;padding:0 12px!important;height:44px!important;font-size:12.5px!important}
  /* top bar tool buttons: icon only, no chevrons / labels */
  html body .page-header .nv-tb>svg:last-child,html body .page-header .nv-tb .chev{display:none!important}
  html body .page-header .nv-curbtn span{display:none!important}
}@media (max-width:620px){
  html body .page-header{gap:5px!important;padding:0 8px!important}
  html body .page-header .nv-tb{width:36px!important;height:36px!important;border-radius:12px!important}
  html body .page-header .header-left .icon-btn{width:38px!important;height:38px!important}
  html body .page-header .balance-box{height:38px!important;padding:0 6px!important}
  html body .page-header .balance-box .nv-eye-in{display:grid!important;width:26px!important;height:26px!important;margin-inline-start:4px!important;border-radius:9px 9px 9px 3px!important}
  html body .page-header .balance-box .nv-eye-in svg{width:14px!important;height:14px!important}
  html body .page-header .balance-amount{font-size:12px!important}
}
/* our-sites strip: names always stay inside their buttons */
.nv-site{overflow:hidden}
.nv-site>span{flex:1 1 auto;min-width:0;overflow:hidden}
.nv-site b{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nv-site small{display:block;max-width:100%}
@media (max-width:620px){
  .nv-site{flex:1 1 calc(50% - 8px);gap:8px;padding:8px 9px!important}
  .nv-site i{width:32px!important;height:32px!important;border-radius:11px 11px 11px 4px}
  .nv-site i svg{width:17px;height:17px}
  .nv-site b{font-size:12px!important}
  .nv-site small{font-size:9.5px!important}
}
/* phones: top-bar dropdowns (theme / language / notifications) open as a sheet inside the screen */
@media (max-width:620px){
  html body .page-header .nv-menu,html body .nv-menu{position:fixed!important;top:70px!important;left:10px!important;right:10px!important;inset-inline:10px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 150px)!important;overflow-y:auto!important;transform:none!important;z-index:100001!important}
  html body .nv-menu .nv-cz__combos{grid-template-columns:repeat(7,1fr)}
}@media (max-width:620px){
  html body .page-header,html body .page-header .header-right,html body .page-header .nv-tools,html body .page-header .nv-dd{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;filter:none!important;contain:none!important;will-change:auto!important}
  html body .page-header .nv-dd{position:static!important}
}
/* phones: platform tiles keep their names (the template hides the text on small screens) */
@media (max-width:620px){
  html body .new-order .platform-filter .filter-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body .new-order .platform-filter .brand-category{padding:8px 10px!important;min-height:50px!important;gap:8px!important;flex-direction:row!important;justify-content:flex-start!important}
  html body .new-order .platform-filter .filter-text{display:block!important;flex:1 1 auto!important;width:auto!important;min-width:0;font-size:12px!important;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start!important;visibility:visible!important;opacity:1!important}
  html body .new-order .platform-filter .filter-icon{width:30px!important;height:30px!important;flex:none}
}
/* phones: support channels as a 2 x 2 grid, payment methods in 2 columns */
@media (max-width:620px){
  html body .nv-sup{padding:16px 14px!important;border-radius:26px 26px 26px 8px!important}
  html body .nv-sup__head{margin-bottom:14px!important}
  html body .nv-sup__head h2{font-size:22px!important}
  html body .nv-sup__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html body .nv-ch{padding:14px 12px!important;border-radius:20px 20px 20px 7px!important}
  html body .nv-ch__i{width:44px!important;height:44px!important;margin-bottom:4px!important;border-radius:15px 15px 15px 5px!important}
  html body .nv-ch__i svg{width:24px!important;height:24px!important}
  html body .nv-ch strong{font-size:14px!important}
  html body .nv-ch small{display:none!important}
  html body .nv-ch em{margin-top:8px!important;padding:5px 10px!important;font-size:11px!important}
  html body .nv-gw{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body .nv-gw>*{padding:12px 10px!important}
}
/* ============ phones: 4 tiles in a row (payment methods + support channels), one-line list rows ============ */
@media (max-width:620px){
  html body .nv-gw{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  html body .nv-gw>*{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center;text-align:center;gap:5px!important;padding:9px 4px!important;min-height:0!important;border-radius:16px 16px 16px 6px!important}
  html body .nv-gw>* :is(.nv-gw__i,i,svg){width:30px!important;height:30px!important;flex:none}
  html body .nv-gw>* :is(b,strong,.nv-gw__n){font-size:10px!important;line-height:1.25;white-space:normal!important;overflow:hidden;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}
  html body .nv-gw>* :is(small,.nv-gw__s){display:none!important}
  html body .nv-gw>* em,html body .nv-gw>* .nv-gw__ck{width:16px!important;height:16px!important;font-size:9px!important;top:4px!important;inset-inline-start:4px!important}

  html body .nv-sup__grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  html body .nv-ch{align-items:center!important;text-align:center!important;padding:10px 4px!important;gap:4px!important;border-radius:16px 16px 16px 6px!important}
  html body .nv-ch::before{display:none}
  html body .nv-ch__i{width:36px!important;height:36px!important;margin:0 0 2px!important;border-radius:12px 12px 12px 4px!important}
  html body .nv-ch__i svg{width:20px!important;height:20px!important}
  html body .nv-ch strong{font-size:10.5px!important;white-space:nowrap}
  html body .nv-ch em,html body .nv-ch small{display:none!important}

  /* history / ticket rows: everything on ONE line */
  html body .lists .nv-tcards tbody tr,html body .tickets .nv-tcards tbody tr{gap:6px!important;padding:11px 10px!important;border-radius:16px 16px 16px 6px!important}
  html body .lists .nv-tcards td,html body .tickets .nv-tcards td{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis;font-size:11px!important}
  html body .lists .nv-tcards td::before,html body .tickets .nv-tcards td::before{display:none!important}
  html body .lists .nv-tcards td:first-child{flex:0 0 34px!important}
  html body .lists .nv-tcards td .amount{font-size:13px!important}
  html body .tickets .nv-tcards td:first-child{flex:0 0 28px!important}
  html body .tickets .nv-tcards td .ticket-title{font-size:11.5px!important}

  /* affiliates tiles: one per row, label never leaves the tile */
  html body .affiliates .nv-tcards.nv-one tbody tr{grid-template-columns:1fr!important}
  html body .affiliates .nv-tcards.nv-one td:not(.td_link)::before{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* ============ phone drawer (sidebar): header is the same panel as the body, logo fills it ============ */
@media (max-width:991px){
  html body .sidebar{width:min(300px,86vw)!important;padding:10px!important;box-sizing:border-box;margin-right:calc(min(300px,86vw) * -1)}
  html body.sidebar-open .sidebar{margin-right:0!important}
  html body .sidebar .sidebar-header{width:100%!important;height:84px!important;margin:0!important;padding:0 14px!important;display:flex!important;align-items:center;justify-content:space-between;gap:8px;border-radius:26px 26px 0 0!important;border:1px solid color-mix(in srgb,var(--nv-v) 38%,transparent)!important;border-bottom:0!important;background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--nv-v) 22%,transparent),transparent 70%),var(--card-solid)!important;box-shadow:none!important}
  html body .sidebar .sidebar-header .brand{flex:1 1 auto;min-width:0;display:flex!important;align-items:center;justify-content:center;height:100%;padding:6px 0}
  html body .sidebar .sidebar-header .brand img{width:auto!important;height:auto!important;max-height:64px!important;max-width:100%!important;object-fit:contain;display:block}
  html body .sidebar .sidebar-body{margin:0!important;height:calc(100% - 84px)!important;max-height:none!important;border-radius:0 0 26px 26px!important;border-top:0!important}
  html body .sidebar .sidebar-header .nv-hw-hat{display:none!important}
}

/* landing header: "Create account" button text stays inside its frame */
@media (max-width:991px){
  html body header .navbar .auth-buttons .btn{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important;min-width:84px;height:38px!important;padding:0 14px!important;font-size:12.5px!important;letter-spacing:0!important;overflow:visible!important}
}
/* chat button width: identical to Telegram / WhatsApp on every screen */
html body button.sv-bot4-button{width:56px!important;min-width:56px!important;max-width:56px!important;height:56px!important;padding:0!important;box-sizing:border-box!important}
@media (max-width:991px){html body button.sv-bot4-button{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important}}

/* phones: the 4-channel card spans the full width; tickets + add-funds instruction text fits its line */
@media (max-width:620px){
  html body .nv-sup{margin-inline:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box}
  html body .tickets{padding-inline:0!important;width:100%!important;max-width:100%!important}
  html body .tickets>.nv-sup{grid-column:1/-1}
  html body .nv-sup__grid{width:100%}
  html body [id^="vikingpay-"],html body [id^="vikingpay-"] *{max-width:100%;box-sizing:border-box}
  html body [id^="vikingpay-"] :is(p,span,div,li,label,small,b,strong){font-size:clamp(11px,3.1vw,13px)!important;overflow-wrap:anywhere}
  html body [id^="vikingpay-"] :is(h1,h2,h3){font-size:clamp(15px,4.6vw,18px)!important;line-height:1.35!important}
  html body [id^="vikingpay-"] :is(code,.mono,[class*="num"],[class*="phone"]){font-size:clamp(12px,3.6vw,15px)!important;letter-spacing:0!important}
}
/* ============ Updates page on phones ============ */
@media (max-width:620px){
  html body .nv-hero{padding:16px 14px!important;gap:12px!important;margin-bottom:14px!important}
  html body .nv-hero__i{width:46px!important;height:46px!important;font-size:20px!important;border-radius:16px 16px 16px 6px!important;flex:none}
  html body .nv-hero h2{font-size:20px!important}
  html body .nv-hero p{font-size:12px!important;line-height:1.5}
  html body .nv-hero>div:last-child{min-width:0;flex:1}
  html body .nv-hero .nv-hw-hero,html.nv-hw .nv-hero .nv-hw-hero{display:none!important}
  html body .nv-tcards td[data-head*="."]::before,html body .nv-tcards td[data-head="UPDATES.ACTIONS"]::before{display:none!important}
  html body .updates .nv-tcards tbody tr,html body .nv-tcards:not(.nv-one) tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px 10px!important;padding:12px!important}
  html body .nv-tcards .update-service-cell{grid-column:1/-1!important}
  html body .nv-tcards td:last-child:not(:first-child):empty{display:none}
  html body .nv-tcards td{font-size:12px!important;min-width:0}
}
/* ============ phones: filter chips = ONE swipeable line; chat floating button identical to Telegram / WhatsApp ============ */
@media (max-width:620px){
  html body :is(.updates-filters,.nav-pills,.orders-filters,.refunds-filters,.status-filters,.filter-tabs){display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding:4px 2px 8px!important;margin:0 0 10px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  html body :is(.updates-filters,.nav-pills,.orders-filters,.refunds-filters,.status-filters,.filter-tabs)::-webkit-scrollbar{display:none}
  html body :is(.updates-filters,.nav-pills,.orders-filters,.refunds-filters,.status-filters,.filter-tabs)>li,html body :is(.updates-filters,.nav-pills,.orders-filters,.refunds-filters,.status-filters,.filter-tabs)>a,html body :is(.updates-filters,.nav-pills,.orders-filters,.refunds-filters,.status-filters,.filter-tabs)>button{flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start;margin:0!important}
  html body :is(.updates-filters,.nav-pills,.orders-filters,.refunds-filters,.status-filters,.filter-tabs) a{white-space:nowrap!important;padding:9px 14px!important;font-size:12.5px!important;display:inline-flex!important;align-items:center;gap:6px}
}
html body button.sv-bot4-button,html body .sv-bot4-button{width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;min-height:56px!important;max-height:56px!important;padding:0!important;box-sizing:border-box!important;aspect-ratio:1/1!important;flex:none!important}
@media (max-width:991px){html body button.sv-bot4-button,html body .sv-bot4-button{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important}}
/* status filters on phones: ALL visible at once (3 per row), each label on one line */
@media (max-width:620px){
  html body .updates-filters{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;gap:6px!important;padding:2px 0 6px!important;scroll-snap-type:none}
  html body .updates-filters>li{min-width:0}
  html body .updates-filters a{width:100%;justify-content:center;padding:9px 4px!important;font-size:11px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;gap:4px!important;border-radius:14px 14px 14px 5px!important}
  html body .updates-filters a i,html body .updates-filters a svg{display:none!important}
}
/* the chat button lives OUTSIDE <body>, so these selectors start at html */
html button.sv-bot4-button{width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;min-height:56px!important;max-height:56px!important;padding:0!important;box-sizing:border-box!important;aspect-ratio:1/1!important;border-radius:20px 20px 20px 7px!important;border:1.5px solid rgba(255,255,255,.35)!important;display:grid!important;place-items:center;color:#fff!important;background:linear-gradient(135deg,var(--nv-v2),var(--nv-v) 55%,var(--nv-f))!important;box-shadow:0 14px 28px -10px var(--nv-v),0 0 0 4px color-mix(in srgb,var(--nv-v) 22%,transparent)!important;transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s!important}
html button.sv-bot4-button:hover{transform:translateY(-4px) scale(1.06)!important}
html button.sv-bot4-button svg{width:27px!important;height:27px!important;stroke:#fff!important;fill:none!important}
@media (max-width:991px){html button.sv-bot4-button{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important;border-radius:16px 16px 16px 6px!important}html button.sv-bot4-button svg{width:23px!important;height:23px!important}}
/* ============ desktop sidebar: everything fits the screen height, no inner scrolling (scales with the window height) ============ */
@media (min-width:992px){
  html body .sidebar{height:100vh!important}
  html body .sidebar-menu{overflow:visible!important;flex:1 1 auto;min-height:0}
  html body .sidebar-menu-flat>.nav-menu{display:flex!important;flex-direction:column;justify-content:space-evenly;height:100%;gap:0!important;margin:0!important;padding:0!important}
  html body .sidebar-menu-flat>.nav-menu>li{flex:1 1 0;min-height:0;max-height:48px;display:flex;margin:0!important}
  html body .sidebar-menu-flat>.nav-menu>li>a{width:100%;min-height:0!important;height:100%;padding-block:0!important;align-items:center}
  html body .sidebar-menu-flat .nav-icon{width:clamp(22px,3.6vh,32px)!important;height:clamp(22px,3.6vh,32px)!important}
  html body .sidebar-menu-flat .nav-label{font-size:clamp(11.5px,1.65vh,14px)!important}
  html body .sidebar-body .sidebar-music-player{zoom:clamp(.6,.1vh,.8)}
  html body .sidebar-body .user-box{padding-block:clamp(6px,1.2vh,12px)!important}
  html body .sidebar-body .sidebar-logout-btn{min-height:clamp(30px,4.6vh,40px)!important}
}
@media (min-width:992px) and (max-height:700px){
  html body .sidebar-body .sidebar-music-player{display:none!important}
}
/* ============ desktop sidebar v3: full page height edge-to-edge, roomy items ============ */
@media (min-width:992px){
  html body .sidebar{padding:0!important;height:100vh!important;top:0!important;bottom:0!important}
  html body .sidebar .sidebar-header{border-radius:0!important;height:92px!important;border-inline:0!important;border-top:0!important}
  html body .sidebar .sidebar-body{border-radius:0!important;height:calc(100vh - 92px)!important;border-inline:0!important;border-bottom:0!important;padding:8px 12px 12px!important}
  html body .sidebar-menu-flat>.nav-menu{justify-content:flex-start!important;height:auto!important;gap:4px!important}
  html body .sidebar-menu-flat>.nav-menu>li{flex:0 1 46px!important;min-height:38px;max-height:50px}
  html body .sidebar-menu-flat>.nav-menu>li>a{padding-inline:14px!important;gap:12px!important}
  html body .sidebar-menu-flat .nav-icon{width:clamp(28px,3.9vh,36px)!important;height:clamp(28px,3.9vh,36px)!important}
  html body .sidebar-menu-flat .nav-label{font-size:clamp(13px,1.7vh,15px)!important}
  html body .sidebar-body .sidebar-music-player{zoom:.85}
}
@media (min-width:992px) and (max-height:700px){html body .sidebar-body .sidebar-music-player{display:none!important}}@media (min-width:992px){
  html body .sidebar-menu{flex:1 1 0!important;min-height:0!important;overflow:hidden!important}
  html body .sidebar-menu-flat>.nav-menu{height:100%!important;gap:3px!important}
  html body .sidebar-menu-flat>.nav-menu>li{flex:1 1 0!important;min-height:34px!important;max-height:48px!important}
}
/* sidebar v4: rounded panel, as tall as the window (small even margin all around) */
@media (min-width:992px){
  html body .sidebar{padding:10px!important}
  html body .sidebar .sidebar-header{border-radius:30px 30px 0 0!important;border:1px solid color-mix(in srgb,var(--nv-v) 38%,transparent)!important;border-bottom:0!important;height:88px!important}
  html body .sidebar .sidebar-body{border-radius:0 0 30px 30px!important;border:1px solid color-mix(in srgb,var(--nv-v) 38%,transparent)!important;border-top:0!important;height:calc(100vh - 20px - 88px)!important;padding:8px 12px 12px!important}
}
/* white theme: readable text on the template's coloured buttons */
html:not(.dark) .sidebar-body .user-box .user-avatar:hover .go-arrow,
html:not(.dark) .main-wrapper ul.nav-menu .badge,
html:not(.dark) .main-boxes .level-badge,
html:not(.dark) .filter-row .filter-list li .brand-category.active,
html:not(.dark) .order .order-nav-item,
html:not(.dark) .instructions .main-btn,
html:not(.dark) .massorder .submit-btn,
html:not(.dark) .orders .table-wrapper .btn-copy,
html:not(.dark) .orders .table-wrapper .btn-search,
html:not(.dark) .orders .status-badge,
html:not(.dark) .orders .table-wrapper .order-actions .btn-primary,
html:not(.dark) .services .table-wrapper .category-name,
html:not(.dark) .services .table-wrapper .btn-copy,
html:not(.dark) .services .table-wrapper .btn-order-now,
html:not(.dark) .services-filter .filter-button .dropdown-toggle,
html:not(.dark) .services-filter .service-search button,
html:not(.dark) .addfunds .methods .method-card.active .method-check,
html:not(.dark) .addfunds .bonus-toggle,
html:not(.dark) .addfunds .btn-pay,
html:not(.dark) .addfunds .quick-btn.active,
html:not(.dark) .addfunds .lists .invoice a,
html:not(.dark) .addfunds .toggle-methods,
html:not(.dark) .api table thead,
html:not(.dark) .api .button,
html:not(.dark) .tickets .card form button[type=submit],
html:not(.dark) .tickets table thead,
html:not(.dark) .tickets .step-highlight,
html:not(.dark) .ticketview .chat .message.user .bubble,
html:not(.dark) .ticketview .reply button[type=submit],
html:not(.dark) .blog .actions .btn,
html:not(.dark) .post .actions .back-btn,
html:not(.dark) .account .btn,
html:not(.dark) .childpanels .btn-sm,
html:not(.dark) .childpanel-create .tab-btn.active,
html:not(.dark) .childpanel-create .store-submit,
html:not(.dark) .childpanel-create .accordion-item.active .accordion-header,
html:not(.dark) .affiliates .table .btn-sm,
html:not(.dark) .update-service-id{color:#fff!important}

/* ============ account levels card: medals, line and crown follow the theme colours ============ */
html body .order-info .nv-lv .nv-lv__t i{background:var(--nv-f2,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--nv-f) 45%,transparent),0 0 14px var(--nv-f)}
html body .order-info .nv-lv .nv-lv__line{background:color-mix(in srgb,var(--nv-f) 30%,rgba(255,255,255,.18))}
html body .order-info .nv-lv .nv-lv__line span{background:linear-gradient(90deg,var(--nv-f),var(--nv-f2,#fff));box-shadow:0 0 14px var(--nv-f)}
/* every medal fully visible (they were faded into the card) */
html body .order-info .nv-lv .nv-lv__m{opacity:1!important}
html body .order-info .nv-lv .nv-lv__m b{background:color-mix(in srgb,var(--nv-f) 38%,rgba(0,0,0,.35))!important;border:2px solid #fff!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 8px 18px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35)}
html body .order-info .nv-lv .nv-lv__m span{color:#fff!important;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.4)}
html body .order-info .nv-lv .nv-lv__m.on b{background:#fff;color:var(--nv-v);border-color:#fff;animation:nvLvPulse 2.4s ease-in-out infinite}
@keyframes nvLvPulse{0%,100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--nv-f) 35%,transparent),0 12px 26px -8px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--nv-f) 0%,transparent),0 12px 26px -8px rgba(0,0,0,.5)}}
html body .order-info .nv-lv .nv-lv__m:last-child b{background:linear-gradient(135deg,var(--nv-f2),var(--nv-f));border-color:#fff;box-shadow:0 0 18px -2px var(--nv-f);animation:nvLvCrown 3s ease-in-out infinite}
html body .order-info .nv-lv .nv-lv__m:last-child b svg{color:#fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes nvLvCrown{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){html body .order-info .nv-lv .nv-lv__m b{animation:none!important}}

/* ============ payment history rows (add funds): every value in its right place ============ */
html body .lists .nv-tcards tbody tr{margin:0 0 12px!important;padding:14px 22px 14px 18px!important}
html body .lists .nv-tcards td{flex:1 1 0!important}
html body .lists .nv-tcards td:first-child{flex:0 0 70px!important}
/* date + time read left-to-right (2026-10-26 23:04:15) and stay right-aligned under their label */
html body .lists .nv-tcards td:nth-child(2):not(.list_method){direction:ltr;text-align:right!important;font-variant-numeric:tabular-nums}
html body .lists .nv-tcards td:nth-child(2):not(.list_method)::before{direction:rtl;text-align:right}
/* amount: pinned to the end of the row, label and number on the same edge */
html body .lists .nv-tcards td:has(.amount){flex:0 1 auto!important;min-width:110px;max-width:30%;text-align:left!important}
html body .lists .nv-tcards td:has(.amount)::before{text-align:left}
html body .lists .nv-tcards td .amount{display:inline-block;direction:ltr;font-variant-numeric:tabular-nums;line-height:1.15}
/* phone: two lines -> [ID] [method / date] [amount] */
@media (max-width:760px){
  html body .lists .nv-tcards tbody tr{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto!important;grid-template-areas:"id m a" "id d a";gap:3px 10px!important;align-items:center!important;padding:11px 14px 11px 12px!important;margin-bottom:9px!important}
  html body .lists .nv-tcards td{flex:none!important;max-width:none;min-width:0!important;width:auto!important}
  html body .lists .nv-tcards td:first-child{grid-area:id;font-size:13px!important}
  html body .lists .nv-tcards td.list_method{grid-area:m;font-size:12px!important}
  html body .lists .nv-tcards td:nth-child(2):not(.list_method){grid-area:d;font-size:11px!important;opacity:.75}
  html body .lists .nv-tcards td:has(.amount){grid-area:a;align-self:center;overflow:visible!important;text-overflow:clip!important;min-width:max-content!important;direction:ltr}
  html body .lists .nv-tcards td .amount{font-size:16px!important}
}
/* sidebar on normal laptop screens (700-1000px tall): the mp3 player stays visible, the menu squeezes to fit */
@media (min-width:992px) and (max-height:1000px){
  html body .sidebar-menu-flat>.nav-menu{gap:2px!important}
  html body .sidebar-menu-flat>.nav-menu>li{min-height:30px!important}
  html body .sidebar-menu-flat>.nav-menu>li>a{min-height:30px!important;padding-block:2px!important}
  html body .sidebar-menu-flat .nav-icon{width:28px!important;height:28px!important}
  html body .sidebar-body .sidebar-music-player{display:block!important;zoom:.78;margin:6px 0 4px!important;flex:none}
  html body .sidebar-body .user-box{margin:4px 4px 6px!important;padding-block:6px!important}
  html body .sidebar-body .nv-sbth{margin-bottom:6px;padding:5px 10px}
}
/* ============ blog list card ============ */
/* one post = one centred card (it used to sit alone in the right column of an empty 2-column grid) */
html body .blog .lists{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),580px))!important;justify-content:center!important;gap:26px!important}
html body .blog .lists .post{display:flex!important;flex-direction:column;height:100%}
html body .blog .lists .post .image{flex:none}
html body .blog .lists .post .image img{display:block;width:100%;height:240px;max-height:none!important;object-fit:cover;object-position:center;border:0!important;box-shadow:none!important}
html body .blog .lists .post .info{display:flex;flex-direction:column;flex:1 1 auto;gap:10px;padding:22px 26px 26px!important}
html body .blog .lists .post .title{font-size:19px;line-height:1.5;margin:0!important;text-align:start}
/* empty paragraphs at the start of the text (line breaks only) made a big gap under the title */
html body .blog .lists .post .content p:empty,
html body .blog .lists .post .content p:has(> font:only-child > br:only-child),
html body .blog .lists .post .content p:has(> br:only-child){display:none!important}
html body .blog .lists .post .content,html body .blog .lists .post .content *{text-align:start!important;margin-top:0!important;margin-bottom:0!important}
html body .blog .lists .post .content{-webkit-line-clamp:4;line-clamp:4;margin:0!important}
html body .blog .lists .post .actions{margin-top:auto;padding-top:8px}
html body .blog .lists .post .actions .btn{background:var(--nv-grad-hot)!important;color:#fff!important;border:0!important;box-shadow:0 14px 26px -12px var(--nv-glow)!important;transform:none}
html body .blog .lists .post .actions .btn:hover{transform:translateY(-3px)}
@media (max-width:768px){
  html body .blog .lists{grid-template-columns:1fr!important}
  html body .blog .lists .post .image img{height:180px}
  html body .blog .lists .post .info{padding:16px 16px 18px!important}
  html body .blog .lists .post .title{font-size:17px}
  html body .blog .lists .post .actions .btn{width:100%}
}
/* blog page inside the dashboard: start below the fixed header (other pages already leave this space) */
html body .page-content>.page-header~.blog{padding-top:124px!important;padding-bottom:40px}
@media (max-width:991px){html body .page-content>.page-header~.blog{padding-top:96px!important;padding-bottom:90px}}
@media (max-width:991px){html body .page-content>.page-header~.blog .container{padding-inline:14px!important}}

/* =====================================================================
   Theme text colours (set from the theme menu)
   --nv-wc-t = balance card text, --nv-wc-n = balance amount,
   --nv-num  = numbers on the other cards, --nv-lbl = app names on new order
===================================================================== */
/* balance card: text follows the chosen colour (white when nothing is picked) */
html body .main-boxes .stat-card.balance,html body .new-order .main-boxes .stat-card.balance{color:var(--nv-wc-t,#fff)!important}
html body .main-boxes .stat-card.balance :is(.card-label,.balance-row span,.card-meta,.card-header span){color:color-mix(in srgb,var(--nv-wc-t,#fff) 82%,transparent)!important;-webkit-text-fill-color:currentColor}
html body .main-boxes .stat-card.balance :is(.balance-row h3,.card-value){color:var(--nv-wc-n,var(--nv-wc-t,#fff))!important;-webkit-text-fill-color:var(--nv-wc-n,var(--nv-wc-t,#fff))!important;background:none!important}
html body .main-boxes .stat-card.balance .icon-btn-sm{color:var(--nv-wc-t,#fff)!important}
html body .main-boxes .stat-card.balance .nv-wc__no{color:color-mix(in srgb,var(--nv-wc-t,#fff) 70%,transparent)}
html body .main-boxes .stat-card.balance .nv-wc__no b{color:var(--nv-wc-t,#fff)}
html body .main-boxes .stat-card.balance .nv-wc__brand{color:color-mix(in srgb,var(--nv-wc-t,#fff) 55%,transparent)}

/* numbers on the other dashboard cards (only when a colour is picked) */
html.nv-num body .main-boxes .stat-card:not(.balance) :is(h3,.card-value,.stat-value){background:none!important;color:var(--nv-num)!important;-webkit-text-fill-color:var(--nv-num)!important}

/* sidebar icons take the theme colours */
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon{
  background:linear-gradient(135deg,color-mix(in srgb,var(--nv-v) 24%,transparent),color-mix(in srgb,var(--nv-f) 14%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--nv-v2) 50%,transparent)!important;color:var(--nv-f2)!important}
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon i{background:linear-gradient(135deg,var(--nv-v2),var(--nv-f));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon svg{color:var(--nv-f2);stroke:currentColor}
html:not(.dark) body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon{color:var(--nv-v)!important}
html:not(.dark) body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a .nav-icon i{background:linear-gradient(135deg,var(--nv-v),var(--nv-f));-webkit-background-clip:text;background-clip:text}
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a:hover .nav-icon{background:var(--nv-mix)!important;border-color:transparent!important;color:#fff!important}
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li.active>a .nav-icon{background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li.active>a .nav-icon i,
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a:hover .nav-icon i{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li.active>a .nav-icon svg,
html body .main-wrapper .sidebar-menu-flat>.nav-menu>li>a:hover .nav-icon svg{color:#fff}

/* new order: app names bigger and in a strong colour */
html body .new-order .platform-filter .brand-category .filter-text{
  font-size:15px!important;font-weight:900!important;line-height:1.3!important;letter-spacing:0!important;
  color:var(--nv-lbl,var(--nv-f2))!important;-webkit-text-fill-color:var(--nv-lbl,var(--nv-f2))!important;
  text-shadow:0 2px 12px color-mix(in srgb,var(--nv-lbl,var(--nv-f)) 35%,transparent)}
html:not(.dark) body .new-order .platform-filter .brand-category .filter-text{color:var(--nv-lbl,var(--nv-v))!important;-webkit-text-fill-color:var(--nv-lbl,var(--nv-v))!important;text-shadow:none}
html body .new-order .platform-filter .brand-category:hover .filter-text{color:var(--nv-f)!important;-webkit-text-fill-color:var(--nv-f)!important}
html body .new-order .platform-filter .brand-category.active .filter-text{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.35)}
html body .new-order .platform-filter .brand-category{min-height:58px!important}
@media (max-width:620px){
  html body .new-order .platform-filter .brand-category .filter-text{font-size:13.5px!important}
  html body .new-order .platform-filter .brand-category{min-height:52px!important}
}

/* =====================================================================
   New order page: theme gradient frame + soft pulsing glow
   - frame = a masked ring (no repaint), glow = opacity-only pulse (GPU, no lag)
   - phones: the glow stays still; the balance card keeps its own gradient edge
===================================================================== */
html body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card:not(.balance)){position:relative}
html body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card:not(.balance))::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:1;
  background:linear-gradient(130deg,var(--nv-v) 0%,var(--nv-v2) 50%,var(--nv-f) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card:not(.balance))::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--nv-v2) 70%,transparent),0 0 34px -10px color-mix(in srgb,var(--nv-f) 65%,transparent);
  opacity:.35;animation:nvFramePulse 3.8s ease-in-out infinite;will-change:opacity}
html body .new-order .main-boxes .stat-card:not(.balance):nth-child(2)::before{animation-delay:-1.2s}
html body .new-order .main-boxes .stat-card:not(.balance):nth-child(3)::before{animation-delay:-2.4s}
@keyframes nvFramePulse{0%,100%{opacity:.3}50%{opacity:.85}}
html:not(.dark) body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card:not(.balance))::before{box-shadow:0 0 18px -6px color-mix(in srgb,var(--nv-v) 55%,transparent)}
@media (max-width:991px){html body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card:not(.balance))::before{animation:none;opacity:.45;will-change:auto}}
@media (prefers-reduced-motion:reduce){html body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card)::before{animation:none}}
/* =====================================================================
   New order, phones: app tiles 4 per row (icon on top, name underneath)
===================================================================== */
@media (max-width:620px){
  html:root body .new-order .platform-filter .filter-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  html:root body .new-order .platform-filter .filter-list>li{min-width:0;margin:0!important;width:auto!important}
  html:root body .new-order .platform-filter .brand-category{
    flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:6px!important;
    min-height:78px!important;height:100%!important;width:100%!important;box-sizing:border-box!important;padding:10px 4px 8px!important;text-align:center!important}
  html:root body .new-order .platform-filter .brand-category .filter-icon{width:34px!important;height:34px!important;margin:0!important;flex:none}
  html:root body .new-order .platform-filter .brand-category .filter-icon img{width:20px!important;height:20px!important}
  html:root body .new-order .platform-filter .brand-category .filter-text{
    display:block!important;flex:none!important;width:100%!important;font-size:11px!important;line-height:1.25!important;letter-spacing:0!important;
    text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;direction:auto;unicode-bidi:plaintext}
}
@media (max-width:360px){
  html:root body .new-order .platform-filter .filter-list{gap:6px!important}
  html:root body .new-order .platform-filter .brand-category{min-height:70px!important;padding:8px 2px 6px!important}
  html:root body .new-order .platform-filter .brand-category .filter-icon{width:30px!important;height:30px!important}
  html:root body .new-order .platform-filter .brand-category .filter-text{font-size:10px!important}
}
/* =====================================================================
   Fixes 2026-11-01
===================================================================== */
/* sidebar "open" button lives inside the top bar as its first item (desktop, sidebar hidden) */
html body .page-header>.nv-sb-open{position:static!important;inset:auto!important;flex:none;align-self:center;width:46px;height:46px;margin:0;margin-inline-end:12px;z-index:auto!important;box-shadow:0 10px 22px -10px var(--nv-glow)}
@media (min-width:992px){html body.sidebar-folded:not(.open-sidebar-folded) .page-header>.nv-sb-open{display:grid!important;place-items:center}}
@media (max-width:991px){html body .page-header>.nv-sb-open{display:none!important}}

/* available balance: calmer size (the theme JS shrinks it further when the amount is long) */
html body .main-boxes .stat-card.balance .balance-row h3{font-size:clamp(22px,2.2vw,30px)!important;max-width:100%}

/* updates page: the copy-ID cell needs no "updates.actions" label */
html body .nv-tcards td.update-actions-cell::before{display:none!important;content:none!important}
html body .nv-tcards td.update-actions-cell{display:flex!important;align-items:center!important;justify-content:center!important}
html body .nv-tcards td.update-actions-cell .update-actions{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

/* new order: glow around the app icons */
html body .new-order .platform-filter .brand-category .filter-icon{box-shadow:0 0 0 1px color-mix(in srgb,var(--b,var(--nv-v)) 45%,transparent),0 0 18px -3px color-mix(in srgb,var(--b,var(--nv-v)) 75%,transparent),0 8px 18px -8px var(--nv-glow,var(--nv-v))!important}
html body .new-order .platform-filter .brand-category:hover .filter-icon,html body .new-order .platform-filter .brand-category.active .filter-icon{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 22px -2px color-mix(in srgb,var(--b,var(--nv-f)) 85%,transparent)!important}
/* phones: first row of 4 apps + "show all" arrow (button added by the theme JS) */
.nv-apps-more{display:none}
@media (max-width:620px){
  html body .new-order .platform-filter .filter-list.nv-apps-collapsed>li:nth-child(n+5):not(:has(.active)){display:none!important}
  .nv-apps-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:10px 0 2px;padding:9px 14px;border-radius:14px 14px 14px 5px;border:1.5px solid color-mix(in srgb,var(--nv-v) 50%,transparent);background:color-mix(in srgb,var(--nv-v) 12%,transparent);color:var(--text-main);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
  .nv-apps-more svg{width:18px;height:18px;transition:transform .3s;stroke:var(--nv-f2,var(--nv-f))}
  .nv-apps-more.is-open svg{transform:rotate(180deg)}
}

/* new order (phones): account levels card */
@media (max-width:620px){
  html:root body .nv-lv{padding:18px 14px!important}
  html:root body .nv-lv .nv-lv__t{font-size:15px!important}
  html:root body .nv-lv .nv-lv__s{font-size:12.5px!important;line-height:1.6!important;margin-bottom:14px!important}
  html:root body .nv-lv .nv-lv__track{column-gap:4px!important}
  html:root body .nv-lv .nv-lv__m b{width:36px!important;height:36px!important;font-size:14px!important;border-width:2px!important}
  html:root body .nv-lv .nv-lv__m b svg{width:16px!important;height:16px!important}
  html:root body .nv-lv .nv-lv__m span{font-size:9.5px!important;margin-top:6px!important;letter-spacing:0!important}
  html:root body .nv-lv .nv-lv__line{top:18px!important}
}

/* services (phones): the name uses the whole first row, the ID badge sits in its corner */
@media (max-width:767px){
  html:root body table tr.service-row{position:relative;grid-template-areas:"name name name name" "min min rate rate" "time time max max" "actions actions actions actions"!important}
  html:root body table tr.service-row>td:first-child{position:absolute!important;top:12px;inset-inline-start:12px;width:auto!important;max-width:60px;min-width:0!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:2;display:block!important}
  html:root body table tr.service-row>td:first-child::before,html:root body table tr.service-row>td:first-child .service-label{display:none!important}
  html:root body table tr.service-row>td.service-name{transform:none!important;translate:none!important;padding:6px 4px!important}
  html:root body table tr.service-row>td.service-name .service-value{padding-inline-start:44px!important;min-height:30px;line-height:1.7}
}

/* orders (phones): every status tab visible, 3 per row */
@media (max-width:767px){
  html:root body .orders{flex-wrap:wrap!important}
  html:root body .orders>ul.nav.nav-pills{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%!important;flex:1 1 100%!important;min-width:0!important;max-width:100%!important;overflow:visible!important;margin:0 0 10px!important;padding:0!important}
  html:root body .orders>ul.nav.nav-pills>li{width:auto!important;min-width:0;margin:0!important;float:none!important}
  html:root body .orders>ul.nav.nav-pills>li>a{display:flex!important;width:100%!important;justify-content:center!important;padding:9px 6px!important;font-size:12.5px!important;white-space:nowrap;min-width:0}
}

/* one frame per card: no extra outline ring on top of the border */
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.main-boxes .stat-card,.orders-grid>*,.refunds-grid>*,.refill-grid>*,.subscriptions-grid>*,.nv-tcards tbody tr,.api .example,.nv-ch,.nv-sup,.platform-filter .brand-category,.faq-item,.accordion-item,.nv-sites),html body .nv-glow{box-shadow:0 16px 34px -24px color-mix(in srgb,var(--nv-v) 65%,transparent)!important}
html body .new-order :is(.card,.quick-support,.levels-mini-card,.main-boxes .stat-card:not(.balance)){border-color:transparent!important;box-shadow:0 16px 34px -24px color-mix(in srgb,var(--nv-v) 65%,transparent)!important}/* sidebar hidden: the welcome text sits right after the button, the balance group goes to the far end */
@media (min-width:992px){
  html body.sidebar-folded:not(.open-sidebar-folded) .page-header:has(>.nv-sb-open){justify-content:flex-start!important}
  html body.sidebar-folded:not(.open-sidebar-folded) .page-header>.nv-sb-open~.header-right{margin-inline-start:auto!important}
}

/* every card: soft shadow, gentle hover lift and a light theme glow (SaaS style, nothing loud) */
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.main-boxes .stat-card,.orders-grid>*,.refunds-grid>*,.refill-grid>*,.subscriptions-grid>*,.api .example,.nv-ch,.nv-sup,.faq-item,.accordion-item,.nv-sites,.nv-gw button,.nv-tcards tbody tr,table tr.service-row){
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,border-color .28s ease!important}
html body :is(.card,.store-form,.massorder-card,.bonus-card,.levels-mini-card,.quick-support,.main-boxes .stat-card,.orders-grid>*,.refunds-grid>*,.refill-grid>*,.subscriptions-grid>*,.api .example,.nv-ch,.nv-sup,.faq-item,.accordion-item,.nv-sites,.nv-gw button,.nv-tcards tbody tr,table tr.service-row):hover{
  transform:translateY(-2px)!important;
  box-shadow:0 20px 40px -24px color-mix(in srgb,var(--nv-v) 80%,transparent),0 0 26px -10px color-mix(in srgb,var(--nv-v2) 55%,transparent)!important}
html body .main-boxes .stat-card.balance:hover{transform:translateY(-2px)!important}
@media (hover:none){html body :is(.card,.main-boxes .stat-card,.nv-tcards tbody tr,table tr.service-row):hover{transform:none!important}}
@media (prefers-reduced-motion:reduce){html body :is(.card,.main-boxes .stat-card,.nv-tcards tbody tr,table tr.service-row){transition:none!important}}

/* ============ Fixes 2026-11-01 (2): add funds, tickets, refunds, affiliates, services ============ */
/* theme switch: no colour animations while the theme changes (thousands of rows on the services page) */
html.nv-switching *,html.nv-switching *::before,html.nv-switching *::after{transition:none!important}

/* add funds: payment methods fill the row, room under them for the glow */
html body .nv-gw{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:14px!important;padding:6px 4px 18px!important;margin:8px 0 4px!important}
html body .addfunds .form-group.instruction{margin-top:10px!important}
@media (max-width:620px){html body .addfunds .lists td.list_method{text-overflow:ellipsis}}
@media (max-width:991px){html body .nv-gw{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;gap:10px!important}}
@media (max-width:620px){
  html body .nv-gw{grid-template-columns:repeat(auto-fit,minmax(max(72px,calc((100% - 30px)/4)),1fr))!important;gap:10px!important;padding:4px 2px 16px!important}
  html body .nv-gw>*{padding:14px 6px 12px!important;min-height:100px!important;gap:7px!important}
  html body .nv-gw>* i{width:34px!important;height:34px!important}
  html body .nv-gw>* b{font-size:11px!important}
  html body .nv-gw button.on::after{width:17px!important;height:17px!important;font-size:9px!important;top:6px!important;inset-inline-end:6px!important}
  /* support channels (tickets page): same, no empty slot */
  html body .nv-sup__grid{grid-template-columns:repeat(auto-fit,minmax(max(72px,calc((100% - 18px)/4)),1fr))!important}
}

/* tickets: list full width; on phones each ticket = title on top, status + date below */
@media (max-width:991px){html:root body .tickets>.nv-tl{align-self:stretch!important;width:100%!important;max-width:100%!important}html:root body .tickets>.nv-tl table.nv-tcards{width:100%!important}}
@media (max-width:620px){
  html:root body .tickets table.nv-tcards tbody tr{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"id t t" "id s d"!important;align-items:center!important;column-gap:10px!important;row-gap:8px!important;padding:12px 14px!important}
  html:root body .tickets table.nv-tcards tbody tr>td{padding:0!important;border:0!important;min-width:0!important;width:auto!important}
  html:root body .tickets table.nv-tcards tbody tr>td::before{display:none!important}
  html:root body .tickets table.nv-tcards tbody tr>td:nth-child(1){grid-area:id;align-self:stretch;display:grid!important;place-items:center;min-width:34px!important;border-radius:10px;background:color-mix(in srgb,var(--nv-v) 12%,transparent);font-weight:800}
  html:root body .tickets table.nv-tcards tbody tr>td:nth-child(2){grid-area:t;white-space:normal!important;overflow:visible!important}
  html:root body .tickets table.nv-tcards tbody tr>td:nth-child(2) a{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:block;line-height:1.45;font-weight:800}
  html:root body .tickets table.nv-tcards tbody tr>td:nth-child(3){grid-area:s;justify-self:start}
  html:root body .tickets table.nv-tcards tbody tr>td:nth-child(4){grid-area:d;justify-self:end;font-size:11px;opacity:.75;direction:ltr}
  html:root body .tickets table.nv-tcards tbody tr>td:nth-child(4) span{white-space:nowrap}
}

/* refunds: full width, 2 cards per row on phones */
@media (max-width:991px){html:root body .refunds-page>.refunds-grid{align-self:stretch!important;width:100%!important}}
@media (max-width:620px){
  html:root body .refunds-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html:root body .refund-card{padding:12px 10px!important;gap:10px!important;min-width:0!important}
  html:root body .refund-card-header{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px!important}
  html:root body .refund-card .refund-order-id{gap:4px!important}
  html:root body .refund-card .refund-order-link{padding:4px 7px!important;font-size:11px!important}
  html:root body .refund-card .refund-copy{width:26px!important;height:26px!important;min-width:0!important;padding:0!important}
  html:root body .refund-card .refund-status{font-size:10.5px!important;padding:3px 7px!important}
  html:root body .refund-details{grid-template-columns:1fr!important;gap:8px!important}
  html:root body .refund-details>div{padding:8px!important;min-width:0}
  html:root body .refund-details span{font-size:10.5px!important}
  html:root body .refund-details b{font-size:13px!important;overflow-wrap:anywhere}
  html:root body .refund-details>div:nth-child(2) b{font-size:11px!important;direction:ltr;text-align:end}
}

/* affiliates: visits / sign-ups / referrals number sits on the far side like the earnings */
html body .affiliates .nv-tcards td .nv-tv{order:3;font-size:21px;font-weight:900;line-height:1;color:var(--text-main);font-variant-numeric:tabular-nums}

/* services: colours follow the chosen theme */
html body .services .table-wrapper .btn-order-now{background:linear-gradient(135deg,var(--nv-v2) 0%,var(--nv-v) 100%)!important}
/* service ID / copy button: was white on white */
html body .services .table-wrapper .service-value.btn-copy{background:color-mix(in srgb,var(--nv-v) 22%,transparent)!important;color:#fff!important;border:1px solid color-mix(in srgb,var(--nv-v) 45%,transparent)!important;font-weight:800}
html:not(.dark) body .services .table-wrapper .service-value.btn-copy{background:color-mix(in srgb,var(--nv-v) 10%,#fff)!important;color:var(--nv-v)!important}
html body .services .table-wrapper .service-value.btn-copy svg path{fill:currentColor}
/* category title: was white on the white bar in the white theme */
html:not(.dark) body .services .table-wrapper .category-inner,html:not(.dark) body .services .table-wrapper .category-inner strong{color:var(--nv-v)!important;-webkit-text-fill-color:currentColor!important}
html body .services .table-wrapper .metric-icon{background:color-mix(in srgb,var(--nv-v) 16%,transparent)!important}
html.dark body .services .table-wrapper .service-row .td-badge,
html.dark body .services .table-wrapper tr.service-row>td:nth-child(n+3):not(:last-child){background:color-mix(in srgb,var(--nv-v) 7%,var(--card-solid,#0d0818))!important;border-color:color-mix(in srgb,var(--nv-v) 22%,transparent)!important}
/* services on phones: rows off screen are skipped until scrolled to (much faster theme switch and scrolling) */
@media (max-width:620px){html body .services tr.service-row{content-visibility:auto;contain-intrinsic-size:auto 190px}}
/* ============ moving 3-colour frame + soft shadow / glow / hover on every card and tile (2026-11-01) ============ */
@keyframes nvEdgeRot{to{transform:translate(-50%,-50%) rotate(360deg)}}
nv-edge{position:absolute!important;inset:0!important;display:block!important;border-radius:inherit!important;padding:1.3px!important;margin:0!important;pointer-events:none!important;z-index:2!important;overflow:hidden!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important;
  opacity:.65;transition:opacity .3s}
nv-edge>b{position:absolute!important;left:50%!important;top:50%!important;width:var(--nv-d,600px)!important;height:var(--nv-d,600px)!important;display:block!important;margin:0!important;padding:0!important;border:0!important;
  background:conic-gradient(var(--nv-v),var(--nv-v2),var(--nv-f),var(--nv-v2),var(--nv-v))!important;transform:translate(-50%,-50%);animation:nvEdgeRot 7s linear infinite;will-change:transform}
nv-edge.nv-still>b{animation:none!important;will-change:auto!important;transform:translate(-50%,-50%) rotate(35deg)!important}
html:not(.dark) nv-edge{opacity:.55}
html body :is(.nv-edged,#nv-x){border-color:transparent!important;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s!important;
  box-shadow:0 14px 34px -22px color-mix(in srgb,var(--nv-v) 75%,transparent),0 0 20px -12px color-mix(in srgb,var(--nv-v2) 50%,transparent)!important}
html body :is(.nv-edged,#nv-x):hover{transform:translateY(-2px)!important;box-shadow:0 20px 42px -22px color-mix(in srgb,var(--nv-v) 85%,transparent),0 0 30px -10px color-mix(in srgb,var(--nv-f) 45%,transparent)!important}
html body :is(.nv-edged,#nv-x):hover>nv-edge,html body :is(.nv-edged,#nv-x).active>nv-edge{opacity:1}
html body :is(.nv-edged,#nv-x):has(>nv-edge.nv-still):hover{transform:none!important}
@media (hover:none){html body :is(.nv-edged,#nv-x):hover{transform:none!important}}
@media (prefers-reduced-motion:reduce){nv-edge>b{animation:none!important}}/* one frame only: the old ring (::before/::after) is hidden on boxes that have the new frame */
html body :is(.nv-edged,#nv-x).nv-nr-a::after,html body :is(.nv-edged,#nv-x).nv-nr-b::before{content:none!important;display:none!important}
html body :is(.nv-edged,#nv-x),html body :is(.nv-edged,#nv-x):hover{outline:0!important}
/* sidebar: logout button a little lower */
html body .sidebar .sidebar-logout-btn{margin-top:10px!important}

/* ============ Fixes 2026-11-01 (3) ============ */
/* offers popup: the X sits on its own line ABOVE the two tabs, never level with them */
html body #cp-box{padding-top:56px!important}
html body #cp-close{top:14px!important;left:auto!important;right:14px!important;inset-inline:auto 14px!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;line-height:1!important;font-size:15px!important}
html body #cp-tabs{margin-top:0!important}
@media (max-width:620px){
  html body #cp-box{padding-top:52px!important;padding-inline:14px!important}
  html body #cp-close{top:12px!important;right:12px!important;inset-inline:auto 12px!important;width:32px!important;height:32px!important}
}

/* tickets page: search + list are ONE card, not two loose things between cards */
html body .tickets .nv-tl{gap:0!important;background:var(--card-solid)!important;border:1px solid color-mix(in srgb,var(--nv-v) 22%,transparent)!important;border-radius:24px 24px 24px 8px!important;padding:14px!important;position:relative}
html body .tickets .nv-tl>form.search{margin:0 0 12px!important;padding:0 0 12px!important;border-bottom:1px solid color-mix(in srgb,var(--nv-v) 16%,transparent)!important}
html body .tickets .nv-tl>form.search .input-group{width:100%!important}
html body .tickets .nv-tl>table{margin:0!important}
@media (max-width:620px){
  html body .tickets .nv-tl{padding:12px!important;border-radius:20px 20px 20px 7px!important}
  html body .tickets .nv-tl>form.search{margin-bottom:10px!important;padding-bottom:10px!important}
}

/* ticket rows: id / subject / status / replied / time each keep their own column and never collide */
/* ticket row: id, subject, status and time all on ONE line, clear of the floating buttons */
html body .tickets .nv-tcards tbody td::before{display:none!important}
@media (max-width:620px){
html body div.tickets div.nv-tl table.nv-tcards tbody tr{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important;padding:10px 10px 10px 58px!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;width:auto!important;flex:0 0 auto!important;font-size:10px!important;line-height:1.7!important;align-self:center!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td *{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td:nth-child(1){flex:0 0 18px!important;font-weight:900!important;opacity:.5!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td:nth-child(2){flex:1 1 auto!important;min-width:60px!important;font-size:11px!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td>a.ticket-title{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;line-height:1.7!important;padding:0!important;margin:0!important;font-size:11px!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td:nth-child(3){flex:0 0 auto!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr>td:nth-child(4){flex:0 1 62px!important;font-size:8.5px!important;opacity:.5!important;direction:ltr!important}
}
/* the status reads as a chip */
html body .tickets .nv-tcards tbody td .status{display:inline-block!important;padding:2px 8px!important;border-radius:999px!important;font-size:9.5px!important;font-weight:800!important;line-height:1.5!important;white-space:nowrap!important;background:color-mix(in srgb,var(--nv-v) 20%,transparent)!important;color:var(--nv-v2)!important;border:1px solid color-mix(in srgb,var(--nv-v) 40%,transparent)!important}
/* ticket form: a bit more air above each field label */
html body .tickets .card .control-label{margin-top:12px!important;display:block!important}
/* the search keeps ONE border: the field inside the group never gets its own frame */
html body .input-group>.form-control.nv-edgep{border:0!important;background-image:none!important;background-color:transparent!important;animation:none!important;box-shadow:none!important}
/* the search is ONE frame: the group draws it, the field and the button inside draw nothing */
html body .tickets .nv-tl form.search .input-group:not(#nv-x){border:1px solid color-mix(in srgb,var(--nv-v) 45%,transparent)!important;background-image:none!important;animation:none!important;overflow:hidden!important}
html body .tickets .nv-tl form.search .input-group>input.form-control:not(#nv-x){border:0!important;background:transparent!important;background-image:none!important;border-radius:inherit!important;box-shadow:none!important;animation:none!important}
html body .tickets .nv-tl form.search .input-group .input-group-btn>button:not(#nv-x){border:0!important;background:transparent!important;border-radius:inherit!important;box-shadow:none!important}

/* viewticket: bubbles sit on their own side, the time under each one */
html body .view-ticket .chat,html body .viewticket .chat{gap:14px!important}
html body .message>.bubble{max-width:86%!important;width:fit-content!important}
html body .message.user>.bubble,html body .message.user>.meta{margin-inline-start:auto!important}
html body .message.support>.bubble,html body .message.support>.meta{margin-inline-end:auto!important}
html body .message>.meta{font-size:10.5px!important;opacity:.7;margin-top:5px!important}
@media (max-width:620px){
  html body .message>.bubble{max-width:92%!important;font-size:12.5px!important;padding:10px 12px!important}
  html body .message>.meta{font-size:10px!important}
}

/* ============ frame: clearly visible on EVERY card (2026-11-01 / 4) ============ */
nv-edge{padding:2px!important;opacity:.95!important;z-index:3!important}
html:not(.dark) nv-edge{opacity:.85!important}
nv-edge>b{animation-duration:5s!important}
html body :is(.nv-edged,#nv-x):hover>nv-edge{opacity:1!important}
html body :is(.nv-edged,#nv-x){box-shadow:0 14px 32px -20px color-mix(in srgb,var(--nv-v) 85%,transparent),0 0 22px -10px color-mix(in srgb,var(--nv-v2) 60%,transparent)!important}
html body :is(.nv-edged,#nv-x):hover{box-shadow:0 22px 44px -20px color-mix(in srgb,var(--nv-v) 95%,transparent),0 0 34px -8px color-mix(in srgb,var(--nv-f) 60%,transparent)!important}

/* fields cannot hold a child element, so their frame is painted on the border */
@property --nv-pa{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes nvEdgeSpin{to{--nv-pa:360deg}}
html body .nv-edgep{border:2px solid transparent!important;background-image:linear-gradient(var(--card-solid),var(--card-solid)),conic-gradient(from var(--nv-pa),var(--nv-v),var(--nv-v2),var(--nv-f),var(--nv-v2),var(--nv-v))!important;background-origin:border-box!important;background-clip:padding-box,border-box!important;animation:nvEdgeSpin 5s linear infinite!important;box-shadow:0 10px 24px -18px color-mix(in srgb,var(--nv-v) 80%,transparent)!important;transition:box-shadow .3s!important}
html body .nv-edgep:focus,html body .nv-edgep:hover{box-shadow:0 14px 30px -16px color-mix(in srgb,var(--nv-v) 95%,transparent),0 0 24px -10px color-mix(in srgb,var(--nv-f) 55%,transparent)!important}
html.nv-switching .nv-edgep,html.nv-switching nv-edge>b{animation:none!important}
@media (prefers-reduced-motion:reduce){html body .nv-edgep{animation:none!important}}

/* phones: the search inside the tickets card stays clear of the floating support buttons */
@media (max-width:620px){
  html body .tickets .nv-tl>form.search .input-group{width:auto!important;margin-inline-end:56px!important}
}

/* phones: the service id / copy button keeps its own column, never on top of the description */
@media (max-width:620px){
  html body .services .service-row>td.serv-name:first-child{grid-column:1!important;grid-row:1!important}
  html body .services .service-row>td.service-name{grid-column:2/span 3!important;grid-row:1!important;padding-inline-end:6px!important}
}


/* =====================================================================
   Fixes 2026-11-02
===================================================================== */
/* ---- frame: still on every page, it only turns on the new order page (and slower there) ---- */
html.nv-calm nv-edge>b{animation:none!important;will-change:auto!important;transform:translate(-50%,-50%) rotate(35deg)!important}
html.nv-calm .nv-edgep{animation:none!important;--nv-pa:35deg}
html:not(.nv-calm) nv-edge>b{animation-duration:9s!important}
html:not(.nv-calm) .nv-edgep{animation-duration:9s!important}
html.nv-calm body :is(.nv-edged,#nv-x):hover{transform:none!important}

/* ---- boxes that had square corners take the theme's rounded corners, so the frame follows the card shape ---- */
html body .nv-edged.nv-rr{border-radius:var(--nv-corner,26px 26px 26px 7px)!important}
html body .nv-edged.nv-rr-sm{border-radius:var(--nv-corner-sm,16px 16px 16px 5px)!important}
html body .services .table-wrapper.nv-edged{padding:6px!important}

/* ---- small status cards / tabs (orders, refill, refunds, subscriptions, updates): a thin theme frame ---- */
html body :is(.nav-pills>li>a,.tab-btn,.updates-filters a,.levels-tabs button){
  border:1.5px solid transparent!important;
  background:linear-gradient(var(--card-solid,#0d0818),var(--card-solid,#0d0818)) padding-box,linear-gradient(130deg,var(--nv-v),var(--nv-v2),var(--nv-f)) border-box!important}
html body :is(.nav-pills>li.active>a,.nav-pills>li>a.active,.tab-btn.active,.updates-filters a.active,.levels-tabs button.active){
  background:linear-gradient(135deg,var(--nv-v2),var(--nv-v)) padding-box,linear-gradient(130deg,var(--nv-v2),var(--nv-f)) border-box!important;color:#fff!important}
html body :is(.order-card-status,.refund-status,.refill-status,.subscription-status,.drip-status,.status-badge,.tickets .nv-tcards td .status){
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--nv-v2) 75%,transparent),0 4px 12px -6px color-mix(in srgb,var(--nv-v) 70%,transparent)!important;border-radius:999px!important}

/* ---- new order: the chosen service fits inside its field (smaller text, up to 2 lines) ---- */
html body .new-order #orderform-service+.select2-container .select2-selection--single{height:auto!important;min-height:48px!important;display:flex!important;align-items:center}
html body .new-order #orderform-service+.select2-container .select2-selection__rendered{
  font-size:12px!important;line-height:1.5!important;white-space:normal!important;overflow:hidden!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-top:6px!important;padding-bottom:6px!important;max-width:100%}
html body .new-order #orderform-service+.select2-container .select2-selection__rendered *{font-size:inherit!important;line-height:inherit!important}
@media (max-width:620px){html body .new-order #orderform-service+.select2-container .select2-selection__rendered{font-size:10.5px!important}}

/* ---- WhatsApp / Telegram floating buttons take the theme colours ---- */
html body .telegram-button{--c:var(--nv-v2);background:linear-gradient(135deg,var(--nv-v2),var(--nv-v) 60%,color-mix(in srgb,var(--nv-v) 70%,#000))!important;border:1.5px solid rgba(255,255,255,.35)!important}
html body .whatsapp-button{--c:var(--nv-f);background:linear-gradient(135deg,var(--nv-f2,var(--nv-f)),var(--nv-f) 55%,var(--nv-v))!important;border:1.5px solid rgba(255,255,255,.35)!important}

/* ---- services page: every colour follows the theme ---- */
html body .services :is(.category-row td,.category-inner){background:linear-gradient(90deg,color-mix(in srgb,var(--nv-v) 22%,var(--card-solid,#0d0818)),color-mix(in srgb,var(--nv-f) 10%,var(--card-solid,#0d0818)))!important;border-color:color-mix(in srgb,var(--nv-v) 40%,transparent)!important}
html:not(.dark) body .services :is(.category-row td,.category-inner){background:linear-gradient(90deg,color-mix(in srgb,var(--nv-v) 12%,#fff),color-mix(in srgb,var(--nv-f) 6%,#fff))!important}
html body .services thead th{color:var(--nv-v2)!important;border-color:color-mix(in srgb,var(--nv-v) 25%,transparent)!important}
html:not(.dark) body .services thead th{color:var(--nv-v)!important}
html body .services thead th i,html body .services .metric-icon,html body .services .metric-icon *{color:var(--nv-f)!important}
html body .services tr.service-row>td.service-name{border-inline-start-color:var(--nv-f)!important}
html body .services .table-wrapper .btn:not(.btn-order-now){background:linear-gradient(135deg,var(--nv-v2),var(--nv-v))!important;color:#fff!important;border-color:transparent!important}
html body .services .filter-button,html body .services .input-group-btn .btn{background:linear-gradient(135deg,var(--nv-v2),var(--nv-v))!important;color:#fff!important}

/* theme dots under the logo: the 🎃 / 🎄 sit exactly in the middle of their circle */
html body .nv-sbth__b{display:grid!important;place-items:center!important;padding:0!important;line-height:1!important;font-size:12px!important;overflow:hidden;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;text-indent:0!important;vertical-align:middle}
html body .nv-sbth{align-items:center!important}
html body .nv-sbth__d{align-items:center!important}
/* season end date in the theme menu */
.nv-th__t .nv-th__end{color:var(--nv-f)!important;font-weight:900!important}

/* ---- text colours chosen in the theme menu: thick text (titles / bold) and thin text (normal lines), all over the site ---- */
html.nv-tr body :is(.page-content,.sidebar,.nv-foot,header,.services,.blog,.nv-article) :is(p,li,td,span,small,label,a,dd,.form-control,.help-block,.text-muted):not(:is(button,.btn,.badge,.label,.nv-opt,.nv-tb,nv-edge,[class*="status"],.active,.balance-box,.stat-card.balance,.brand-category.active,.nv-sbth,.select2-selection,.music-control) *):not(button,.btn,.badge,.label,[class*="status"],.music-control){
  color:var(--nv-tr)!important;-webkit-text-fill-color:var(--nv-tr)!important}
html.nv-tbc body :is(.page-content,.sidebar,.nv-foot,header,.services,.blog,.nv-article) :is(h1,h2,h3,h4,h5,h6,b,strong,th,dt,.card-title,.card-label,.nav-label,.username,.title,.nv-hero h2,.filter-text,.service-name,.nvq-surah):not(:is(button,.btn,.badge,.label,.nv-opt,.nv-tb,[class*="status"],.active,.balance-box,.stat-card.balance,.brand-category.active,.nav-menu>li.active) *):not(button,.btn,.badge,[class*="status"]){
  color:var(--nv-tb)!important;-webkit-text-fill-color:var(--nv-tb)!important;background-clip:border-box!important;-webkit-background-clip:border-box!important}

/* ---- Quran player ---- */
html body .sidebar-music-player .nvq-info{display:flex;align-items:center;gap:8px;margin:0 0 10px;direction:rtl}
html[dir=ltr] body .sidebar-music-player .nvq-info{direction:ltr}
html body .sidebar-music-player .nvq-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:start}
html body .sidebar-music-player .nvq-surah{font-size:13.5px;font-weight:900;line-height:1.3;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .sidebar-music-player .nvq-reciter{font-size:10.5px;font-weight:700;line-height:1.3;color:var(--nv-f2,var(--nv-f));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .sidebar-music-player .nvq-listbtn{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:11px 11px 11px 4px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--nv-v) 45%,transparent);background:color-mix(in srgb,var(--nv-v) 14%,transparent);color:var(--text-main);transition:.2s}
html body .sidebar-music-player .nvq-listbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .sidebar-music-player .nvq-listbtn:hover,html body .sidebar-music-player .nvq-listbtn.on{background:linear-gradient(135deg,var(--nv-v2),var(--nv-v));color:#fff;border-color:transparent}
html body .sidebar-music-player input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--nv-v2),var(--nv-f)) 0/var(--p,0%) 100% no-repeat,color-mix(in srgb,var(--nv-v) 22%,transparent)!important}
html body .sidebar-music-player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--nv-f);box-shadow:0 0 8px -1px var(--nv-f);cursor:pointer}
html body .sidebar-music-player input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--nv-f)}
html body .sidebar-music-player .nvq-time{display:flex;justify-content:space-between;margin:4px 2px 0;font-size:10px;font-weight:700;color:var(--text-light);direction:ltr;font-variant-numeric:tabular-nums}
html body .sidebar-music-player .nvq-vol{display:flex;align-items:center;gap:8px;margin-top:8px;direction:ltr}
html body .sidebar-music-player .nvq-vol .music-mute{flex:0 0 26px}
html body .sidebar-music-player .nvq-vol input{flex:1;min-width:0}
html body .sidebar-music-player .nvq-vol__pc{flex:none;min-width:34px;text-align:center;font-size:10.5px;font-weight:900;padding:2px 5px;border-radius:8px;
  color:var(--nv-f2,var(--nv-f));background:color-mix(in srgb,var(--nv-f) 14%,transparent);font-variant-numeric:tabular-nums}
html body .sidebar-music-player .music-range-row{direction:ltr}
/* the list (floats beside the card) */
.nvq-panel{position:fixed;z-index:1500;display:none;flex-direction:column;gap:8px;padding:12px;border-radius:22px 22px 22px 7px;direction:rtl;text-align:start;
  background:var(--card-solid,#0d0818);color:var(--text-main);border:1.5px solid color-mix(in srgb,var(--nv-v) 50%,transparent);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.65),0 0 30px -12px color-mix(in srgb,var(--nv-v) 60%,transparent);overflow:hidden}
html[dir=ltr] .nvq-panel{direction:ltr}
.nvq-panel.is-open{display:flex;animation:nvMenu .2s ease-out}
.nvq-panel__h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nvq-panel__h b{font-size:15px;font-weight:900}
.nvq-x{width:28px;height:28px;border-radius:9px;border:1px solid var(--border-color,rgba(150,150,170,.3));background:transparent;color:var(--text-main);cursor:pointer;font-size:16px;line-height:1;padding:0}
.nvq-x:hover{background:var(--nv-f);color:#fff;border-color:transparent}
.nvq-lbl{font-size:11px;font-weight:900;color:var(--text-light);margin-top:2px}
.nvq-recs{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:150px;overflow-y:auto;flex:none;padding-inline-end:2px}
.nvq-recs button,.nvq-ol button{display:flex;align-items:center;gap:7px;width:100%;min-height:38px;padding:6px 9px;border-radius:12px 12px 12px 4px;cursor:pointer;font:inherit;font-size:12px;font-weight:800;line-height:1.3;text-align:start;
  border:1px solid color-mix(in srgb,var(--nv-v) 30%,transparent);background:color-mix(in srgb,var(--nv-v) 8%,transparent);color:var(--text-main);transition:background .15s,border-color .15s}
.nvq-recs button:hover,.nvq-ol button:hover{border-color:var(--nv-v2);background:color-mix(in srgb,var(--nv-v) 18%,transparent)}
.nvq-recs button.on,.nvq-ol button.on{background:linear-gradient(135deg,var(--nv-v2),var(--nv-v));border-color:transparent;color:#fff}
.nvq-q{width:100%;height:36px;padding:0 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--nv-v) 35%,transparent);background:color-mix(in srgb,var(--nv-v) 6%,transparent);color:var(--text-main);font:inherit;font-size:12.5px;outline:0;flex:none}
.nvq-q:focus{border-color:var(--nv-f)}
.nvq-ol{list-style:none;margin:0;padding:0 0 0 2px;display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow-y:auto;min-height:120px;flex:1 1 auto}
.nvq-ol li{margin:0;min-width:0}
.nvq-ol button em{flex:none;min-width:24px;height:20px;display:grid;place-items:center;border-radius:7px;font-style:normal;font-size:10px;font-weight:900;background:color-mix(in srgb,var(--nv-f) 18%,transparent);color:var(--nv-f2,var(--nv-f));font-variant-numeric:tabular-nums}
.nvq-ol button.on em{background:rgba(255,255,255,.22);color:#fff}
.nvq-ol button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nvq-recs::-webkit-scrollbar,.nvq-ol::-webkit-scrollbar{width:5px}.nvq-recs::-webkit-scrollbar-thumb,.nvq-ol::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--nv-v) 55%,transparent);border-radius:9px}
html:not(.dark) .nvq-panel{background:#fff}

/* new order: "show all apps" button on computers too (the theme JS hides every app after the first row) */
html body .new-order .platform-filter .filter-list>li.nv-app-hide{display:none!important}
html body .new-order .nv-apps-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:12px 0 2px;padding:10px 14px;border-radius:14px 14px 14px 5px;border:1.5px solid color-mix(in srgb,var(--nv-v) 50%,transparent);background:color-mix(in srgb,var(--nv-v) 12%,transparent);color:var(--text-main);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s,border-color .2s}
html body .new-order .nv-apps-more:hover{border-color:var(--nv-f);background:color-mix(in srgb,var(--nv-v) 20%,transparent)}
html body .new-order .nv-apps-more svg{width:18px;height:18px;transition:transform .3s;stroke:var(--nv-f2,var(--nv-f))}
html body .new-order .nv-apps-more.is-open svg{transform:rotate(180deg)}/* new order (computers): 4 apps per row */
@media (min-width:621px){
  html:root body .new-order .platform-filter .filter-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
  html:root body .new-order .platform-filter .filter-list>li{width:auto!important;min-width:0!important;margin:0!important}
  html:root body .new-order .platform-filter .brand-category{width:100%!important;min-width:0!important;box-sizing:border-box!important;padding-inline:8px!important;gap:8px!important}
  html:root body .new-order .platform-filter .brand-category .filter-text{font-size:13px!important;min-width:0;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html:root body .new-order .platform-filter .brand-category .filter-icon{flex:none}
}
/* new order: EVERY field in the order card gets the 3-colour theme frame (description, link, quantity, average time, cost, min / max, selects) */
html body .new-order :is(input.form-control,textarea.form-control,div.form-control,.select2-container .select2-selection--single,.help-block.min-max){
  border:1.5px solid transparent!important;border-radius:14px 14px 14px 5px!important;
  background:linear-gradient(color-mix(in srgb,var(--nv-v) 6%,var(--card-solid,#0d0818)),color-mix(in srgb,var(--nv-v) 6%,var(--card-solid,#0d0818))) padding-box,linear-gradient(130deg,var(--nv-v),var(--nv-v2),var(--nv-f)) border-box!important;
  box-shadow:0 8px 20px -16px color-mix(in srgb,var(--nv-v) 80%,transparent)!important;animation:none!important}
html:not(.dark) body .new-order :is(input.form-control,textarea.form-control,div.form-control,.select2-container .select2-selection--single,.help-block.min-max){
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(130deg,var(--nv-v),var(--nv-v2),var(--nv-f)) border-box!important}
html body .new-order :is(input.form-control,textarea.form-control,.select2-selection--single):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--nv-f) 25%,transparent)!important}
html body .new-order .help-block.min-max{display:inline-block!important;padding:5px 12px!important;margin-top:8px!important}
html body .new-order div.form-control.nv-edged>nv-edge{display:none!important}
html body .new-order .input-group>.form-control{border-radius:14px 14px 14px 5px!important}
/* Quran player: real size (no zoom shrinking the text), clear readable text */
html body .sidebar-music-player .nvq-info{margin-bottom:8px!important}
html body .sidebar-music-player .nvq-surah{font-size:14.5px!important;font-weight:900!important;letter-spacing:0}
html body .sidebar-music-player .nvq-reciter{font-size:11.5px!important;font-weight:700!important;opacity:.95}
html body .sidebar-music-player .nvq-time{font-size:11px!important;margin-top:5px!important}
html body .sidebar-music-player .nvq-vol__pc{font-size:11.5px!important;min-width:40px!important}
html body .sidebar-music-player .music-controls{margin-bottom:8px!important}
html body .sidebar-music-player .music-control{width:28px!important;height:28px!important;font-size:12px!important}
html body .sidebar-music-player .music-play{width:40px!important;height:40px!important;font-size:14px!important}
html body .sidebar-music-player .music-cover{width:40px!important;height:40px!important;flex:0 0 40px!important}
html body .sidebar-music-player .nvq-listbtn{width:34px!important;height:34px!important}
html body .sidebar-music-player .music-range-row{gap:7px!important;align-items:center!important}
html body .sidebar-music-player .music-range-row .nvq-t{flex:none;font-size:10.5px;font-weight:800;color:var(--text-light);font-variant-numeric:tabular-nums;min-width:30px;text-align:center}
html body .sidebar-music-player .nvq-vol{margin-top:7px!important}
html body .sidebar-music-player .nvq-info{margin-bottom:6px!important}
/* Quran player: surah + reciter big and clear (the card may be a little taller) */
html body .sidebar-music-player .nvq-info{align-items:center!important;gap:10px!important;margin-bottom:9px!important;padding-bottom:9px!important;border-bottom:1px dashed color-mix(in srgb,var(--nv-v) 35%,transparent)}
html body .sidebar-music-player .nvq-txt{gap:4px!important}
html body .sidebar-music-player .nvq-surah{font-size:16.5px!important;line-height:1.35!important;color:var(--text-main)!important;-webkit-text-fill-color:currentColor}
html body .sidebar-music-player .nvq-reciter{font-size:13px!important;line-height:1.35!important;font-weight:800!important;color:var(--nv-f2,var(--nv-f))!important;-webkit-text-fill-color:currentColor;white-space:normal!important}
html body .sidebar-music-player .music-range-row .nvq-t{font-size:11.5px!important}
html body .sidebar-music-player .nvq-vol__pc{font-size:12.5px!important}
/* Quran player: middle size */
html body .sidebar-music-player .nvq-surah{font-size:15px!important}
html body .sidebar-music-player .nvq-reciter{font-size:12px!important}
html body .sidebar-music-player .nvq-info{margin-bottom:7px!important;padding-bottom:7px!important}
/* field titles (category, service, description, link, quantity, average time, cost) are always readable, whatever colours are chosen */
html body .new-order .control-label,html body .new-order label{color:color-mix(in srgb,var(--nv-f2,var(--nv-f)) 40%,var(--text-main,#fff))!important;-webkit-text-fill-color:currentColor!important}

/* desktop sidebar (original layout): when the items don't fit, the menu scrolls instead of cutting the last tabs off */
@media (min-width:992px){
  html body .sidebar-menu{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--nv-v) 60%,transparent) transparent}
  html body .sidebar-menu::-webkit-scrollbar{width:4px}html body .sidebar-menu::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--nv-v) 60%,transparent);border-radius:9px}
  html body .sidebar-menu-flat>.nav-menu{height:auto!important;min-height:100%!important}
  html body .sidebar-menu-flat>.nav-menu>li{flex:1 0 auto!important;min-height:40px!important;max-height:48px!important}
}

/* home hero: the animated scene sits a little lower, the headline always stays on top of it */
.home-v2 .hero .container.content>.text>h1,.home-v2 .hero h1{position:relative;z-index:20}
.home-v2 .hero .nv-hv{margin-top:56px!important}
@media (max-width:991px){.home-v2 .hero .nv-hv{margin-top:64px!important}}

/* =====================================================================
   Fixes 2026-11-03
===================================================================== */
/* the coloured frame never moves (lighter on every page, phones included) */
html nv-edge>b{animation:none!important;will-change:auto!important;transform:translate(-50%,-50%) rotate(35deg)!important}
html body .nv-edgep{animation:none!important;--nv-pa:35deg}

/* services: the table always fits its box, so the eye / order buttons are never cut off at the edge */
@media (min-width:768px){
  html body .services .table-wrapper table{min-width:0!important;width:100%!important}
  html body .services .table-wrapper tr.service-row>td:not(.service-name){min-width:0!important;width:1%!important;white-space:nowrap}
  html body .services .table-wrapper tr.service-row>td.service-name{width:auto!important;min-width:180px!important}
  html body .services .table-wrapper tr.service-row>td:last-child .actions-item{flex-wrap:nowrap!important;justify-content:center}
}

/* services: categories open / close (only the open ones are drawn: the page with 1,300+ services stays fast) */
html:not(.nv-svc-q) body .services tr.service-row.nv-cx{display:none!important}
html body .services tr.category-row.nv-cat{cursor:pointer;user-select:none}
html body .services tr.category-row.nv-cat .category-inner{display:flex!important;align-items:center;gap:8px}
html body .services .nv-cat__n{margin-inline-start:auto;flex:none;padding:3px 9px;border-radius:99px;font-size:11px!important;line-height:1.4!important;font-weight:900;white-space:nowrap;color:var(--nv-f2,var(--nv-f));background:color-mix(in srgb,var(--nv-f) 14%,transparent)}
html body .services .nv-cat__i{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--nv-v) 22%,transparent);color:var(--text-main);transition:transform .25s}
html body .services .nv-cat__i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html body .services tr.category-row.nv-cat-shut .nv-cat__i{transform:rotate(90deg)}
html[dir=rtl] body .services tr.category-row.nv-cat-shut .nv-cat__i,html:not([dir]) body .services tr.category-row.nv-cat-shut .nv-cat__i{transform:rotate(-90deg)}
html.nv-svc-q body .services .nv-cat__i{visibility:hidden}

/* new order: the "total orders" chart has room to breathe (it was squeezed to 44px) */
html body .main-boxes .stat-card:not(.balance) .nv-spark{flex:0 0 72px!important;min-height:72px!important;max-height:72px!important;height:72px!important;margin-top:10px!important;padding:6px 0 0}
@media (max-width:620px){html body .main-boxes .stat-card:not(.balance) .nv-spark{flex:0 0 56px!important;min-height:56px!important;max-height:56px!important;height:56px!important}}
/* services: rows the panel's search / filter marks as hidden really disappear (the phone card layout used to override it) */
html body .services tr.service-row.hidden,html body .services tr.category-row.hidden,html body .services table tr.hidden{display:none!important}
/* the site chat button (headset) sits at the same level as WhatsApp / Telegram: popups and menus cover it like they cover them */
html .sv-bot4{z-index:9998!important}

/* ===== NOVA colour control: every old fixed-mauve value now follows YOUR colours ===== */
:root,html.dark,html.dark.nv-orange{
  --nv-violet:var(--nv-v);--nv-violet-2:var(--nv-v2);--nv-flame:var(--nv-f);--nv-flame-2:var(--nv-f2);--nv-accent:var(--nv-v);
  --main-color:var(--nv-v);--main-glow:color-mix(in srgb,var(--nv-v) 35%,transparent);
  --nv-grad:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 100%);
  --nv-grad-hot:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 48%,var(--nv-f) 125%);
  --nv-flame-grad:linear-gradient(135deg,var(--nv-f),var(--nv-f2));
  --nv-edge:linear-gradient(color-mix(in srgb,var(--nv-v) 60%,transparent),color-mix(in srgb,var(--nv-v) 60%,transparent));
  --nv-edge-hover:linear-gradient(var(--nv-v),var(--nv-v));
  --card-hover-shadow:color-mix(in srgb,var(--nv-v) 22%,transparent)}
:root{--main-opacity:color-mix(in srgb,var(--nv-v) 10%,transparent);--secondary-color:color-mix(in srgb,var(--nv-v) 5%,transparent);--td-color:color-mix(in srgb,var(--nv-v) 4%,transparent);--section-bg:color-mix(in srgb,var(--nv-v) 4%,transparent);--light-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);--border-color:color-mix(in srgb,var(--nv-v) 36%,transparent)}
html.dark{--main-opacity:color-mix(in srgb,var(--nv-v) 18%,transparent);--secondary-color:color-mix(in srgb,var(--nv-v) 9%,transparent);--td-color:color-mix(in srgb,var(--nv-v) 7%,transparent);--section-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);--light-bg:color-mix(in srgb,var(--nv-v) 8%,transparent);--border-color:color-mix(in srgb,var(--nv-v) 30%,transparent)}
::selection{background:var(--nv-v)}
*{scrollbar-color:color-mix(in srgb,var(--nv-v) 40%,transparent) transparent}

/* ===== 4th colour: sidebar + top bar background ===== */
html.nv-sbc body .sidebar .sidebar-header,html.nv-sbc body .sidebar .sidebar-body,html.nv-sbc body .page-header,html.nv-sbc body .nav-mob{background:var(--nv-s)!important}
html.nv-sbc body .sidebar-body .user-box,html.nv-sbc body .sidebar-music-player{background:color-mix(in srgb,var(--nv-v) 14%,var(--nv-s))!important}
/* ===== left-to-right languages: the dashboard flips (sidebar on the left, floating buttons on the right) ===== */
@media (min-width:992px){html:is(.nv-ltr-dash,.nv-ltr-pre) body .sidebar{right:auto!important;left:0!important}}
@media (max-width:991px){html:is(.nv-ltr-dash,.nv-ltr-pre) body .sidebar{right:auto!important;left:0!important;margin-right:0!important;margin-left:calc(min(300px,86vw) * -1)!important}html:is(.nv-ltr-dash,.nv-ltr-pre) body.sidebar-open .sidebar{margin-left:0!important}}
html:is(.nv-ltr-dash,.nv-ltr-pre) body .integration-fixed.integration-fixed__bottom-left,html:is(.nv-ltr-dash,.nv-ltr-pre) button.sv-bot4-button{left:auto!important;right:24px!important}
@media (max-width:991px){html:is(.nv-ltr-dash,.nv-ltr-pre) body .integration-fixed.integration-fixed__bottom-left,html:is(.nv-ltr-dash,.nv-ltr-pre) button.sv-bot4-button{right:14px!important}}
html:is(.nv-ltr-dash,.nv-ltr-pre) body .sidebar-menu-flat>.nav-menu>li>a:hover{transform:translateX(5px)}
/* ============ NV-TK-MOBILE ============
   On phones a ticket row kept its desktop width: the table stuck out of its card and the date was
   cut off at the edge. The row now wraps - id + status + date on the first line, the full subject
   on its own line under them - and the table becomes a block so it can never be wider than the card.
   The one-line rule above is (0,3,6); these are (0,4,6) so they win inside the phone breakpoint. */
@media (max-width:620px){
html body div.tickets div.nv-tl table.nv-tcards{display:block!important;width:100%!important;min-width:0!important}
html body div.tickets div.nv-tl table.nv-tcards>tbody{display:block!important;width:100%!important}
html body div.tickets div.nv-tl table.nv-tcards>thead{display:none!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged{flex-wrap:wrap!important;height:auto!important;overflow:visible!important;row-gap:3px!important;column-gap:10px!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged>td{flex:0 0 auto!important;min-width:0!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged>td:nth-child(1){order:1}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged>td:nth-child(3){order:2}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged>td:nth-child(4){order:3;margin-inline-start:auto!important;font-size:11px!important;white-space:nowrap!important;opacity:.75}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged>td:nth-child(2){order:4;flex:1 1 100%!important;width:100%!important}
html body div.tickets div.nv-tl table.nv-tcards tbody tr.nv-edged>td:nth-child(2) a{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:block!important;line-height:1.65!important}
}

/* ============ NV-PAGE-STYLE ============
   Custom pages (reseller, terms, privacy, and any service page added later) came out as raw
   unstyled text next to a heavily designed site. The page editor strips inline styles on save,
   so the design has to live here: plain semantic HTML in the editor, styled from the theme. */
html body .rtl-content{max-width:900px;margin:0 auto;font-size:15.5px;line-height:1.95}
html body .rtl-content h1{font-size:clamp(26px,5.5vw,42px);font-weight:900;line-height:1.35;margin:0 0 16px;background:linear-gradient(90deg,var(--nv-f,#ff3b4e),var(--nv-v,#1FB463));-webkit-background-clip:text;background-clip:text;color:transparent}
html body .rtl-content h2{font-size:clamp(19px,3.4vw,24px);font-weight:900;margin:34px 0 14px;padding-inline-start:14px;position:relative}
html body .rtl-content h2::before{content:"";position:absolute;inset-inline-start:0;top:.18em;bottom:.18em;width:5px;border-radius:9px;background:linear-gradient(180deg,var(--nv-f,#ff3b4e),var(--nv-v,#1FB463))}
html body .rtl-content h3{font-size:15.5px;font-weight:900;margin:18px 0 6px;color:var(--nv-f,#ff3b4e)}
html body .rtl-content p{margin:0 0 14px;opacity:.9}
html body .rtl-content ul,html body .rtl-content ol{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:nvp}
html body .rtl-content ul li,html body .rtl-content ol li{padding:13px 16px;border-radius:16px 16px 16px 5px;background:color-mix(in srgb,currentColor 7%,transparent);border:1px solid color-mix(in srgb,currentColor 13%,transparent);font-size:14.5px;line-height:1.85}
html body .rtl-content ol li{counter-increment:nvp;display:flex;gap:12px;align-items:flex-start}
html body .rtl-content ol li::before{content:counter(nvp);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--nv-f,#ff3b4e),var(--nv-v,#C1121F))}
html body .rtl-content strong{color:var(--nv-f,#ffd45e);font-weight:900}
html body .rtl-content a[href$="/signup"]{display:inline-block;margin-top:6px;padding:15px 34px;border-radius:16px 16px 16px 5px;background:linear-gradient(135deg,var(--nv-f,#ff3b4e),var(--nv-v,#C1121F));color:#fff!important;font-weight:900;font-size:16px;text-decoration:none;box-shadow:0 12px 28px -12px rgba(0,0,0,.75);transition:transform .2s}
html body .rtl-content a[href$="/signup"]:hover{transform:translateY(-2px)}
@media (max-width:620px){html body .rtl-content{font-size:14.5px}html body .rtl-content h2{margin:26px 0 12px}}