/* NEXVIA unified theme override. Visual-only: no server controls, IDs or application logic changed. */
:root {
    --nx-bg: #f5f8fc;
    --nx-bg2: #eef5ff;
    --nx-panel: #ffffff;
    --nx-panel2: #f8fbff;
    --nx-line: #dfe8f3;
    --nx-blue: #1168ff;
    --nx-cyan: #08aeea;
    --nx-cyan2: #0b8fd3;
    --nx-white: #14233b;
    --nx-muted: #71849b;
    --nx-gold: #d99a23
}

html, body {
    background: radial-gradient(circle at 80% 10%,rgba(17,104,255,.12),transparent 30%),linear-gradient(145deg,var(--nx-bg),var(--nx-bg2)) !important;
    color: var(--nx-white) !important;
    min-height: 100%
}

    body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image: linear-gradient(rgba(36,200,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(36,200,255,.025) 1px,transparent 1px);
        background-size: 42px 42px
    }

.bg-white, .bg-light, .auth-bg {
    background: rgba(255,255,255,.96) !important
}

.border-bottom, .border, .card, .dropdown-menu, .table, .form-control, .form-select {
    border-color: var(--nx-line) !important
}

.card, .dropdown-menu, .modal-content, .premium-card {
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,251,255,.98)) !important;
    color: var(--nx-white) !important;
    box-shadow: 0 18px 55px rgba(31,70,120,.10) !important;
    border: 1px solid var(--nx-line) !important;
    border-radius: 18px !important
}

.text-dark, .text-body, h1, h2, h3, h4, h5, h6, label, .form-label, .card-title, .nav-text {
    color: var(--nx-white) !important
}

.text-muted, .text-secondary, small {
    color: var(--nx-muted) !important
}

a {
    color: var(--nx-cyan)
}

    a:hover {
        color: var(--nx-cyan2)
    }

.btn-primary, .btn-success, .btn-info {
    background: linear-gradient(135deg,var(--nx-blue),var(--nx-cyan)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(17,104,255,.22)
}

.btn-light, .btn-outline-primary {
    background: rgba(36,200,255,.06) !important;
    border-color: rgba(36,200,255,.28) !important;
    color: var(--nx-cyan2) !important
}

.form-control, .form-select, input, textarea {
    background-color: #ffffff !important;
    color: var(--nx-white) !important
}

    .form-control:focus, .form-select:focus {
        border-color: var(--nx-cyan) !important;
        box-shadow: 0 0 0 .2rem rgba(36,200,255,.12) !important
    }

    .form-control::placeholder {
        color: #8a9bb0 !important
    }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nx-white);
    --bs-table-border-color: var(--nx-line);
    color: var(--nx-white) !important
}

    .table thead th {
        background: rgba(17,104,255,.12) !important;
        color: var(--nx-cyan2) !important
    }

.topbar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(16px);
    border-color: var(--nx-line) !important
}

.sidebar {
    background: linear-gradient(180deg,#eef5ff,#f5f8fc) !important;
    border-right: 1px solid var(--nx-line) !important
}

    .sidebar .nav-link {
        color: #52677f !important;
        border-radius: 10px;
        margin: 2px 10px
    }

        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            background: linear-gradient(90deg,rgba(17,104,255,.22),rgba(36,200,255,.08)) !important;
            color: var(--nx-white) !important
        }

        .sidebar .nav-link i {
            color: var(--nx-cyan) !important
        }

.auth-page {
    background: transparent !important
}

    .auth-page .bg-overlay-gradient {
        background: radial-gradient(circle at center,rgba(36,200,255,.13),transparent 55%) !important
    }

.container.min-vh-100 > .card {
    max-width: 460px !important
}

    .container.min-vh-100 > .card:before {
        content: "SECURE • ON-CHAIN • NEXVIA";
        display: block;
        text-align: center;
        padding: 12px 15px 0;
        color: var(--nx-cyan);
        font-size: 11px;
        letter-spacing: 2px;
        font-weight: 700
    }

.alert-danger {
    background: rgba(220,53,69,.12) !important;
    color: #ff9ca7 !important;
    border-color: rgba(220,53,69,.3) !important
}

.alert-success {
    background: rgba(25,135,84,.12) !important;
    color: #8ce0b2 !important;
    border-color: rgba(25,135,84,.3) !important
}

footer {
    /*border-top: 1px solid var(--nx-line)*/
}

@media(max-width:991px) {
    .sidebar {
        box-shadow: 20px 0 50px rgba(31,70,120,.12)
    }
}


/* 2026 professional responsive dashboard refinement */
.topbar {
    height: 72px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important
}

.sidebar {
    width: 270px !important;
    padding-top: 0 !important;
    overflow-y: auto
}

.logo-area.nx-logo-area {
    height: 92px;
    padding: 14px 18px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--nx-line)
}

.nx-brand {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none !important
}

.nx-brand-logo {
    display: block;
    max-width: 210px;
    width: 100%;
    height: 62px;
    object-fit: contain;
    object-position: left center
}

.nx-top-brand img {
    height: 42px;
    width: 126px;
    object-fit: contain
}

.content {
    padding-top: 96px !important
}

.container-fluid {
    max-width: 1600px;
    margin: 0 auto
}

.sidebar .nav {
    padding: 10px 0 30px
}

.sidebar .nav-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px !important;
    font-weight: 600
}

    .sidebar .nav-link i {
        font-size: 20px
    }

.card {
    overflow: hidden
}

.card-body {
    position: relative
}

.breadcrumb {
    background: transparent !important
}

.breadcrumb-item, .breadcrumb-item a {
    color: var(--nx-muted) !important
}

#content .row.g-3 > .col-lg-3 > .card, #content .row.g-3 > .col-lg-4 > .card {
    height: 100%;
    transition: transform .2s ease,border-color .2s ease
}

    #content .row.g-3 > .col-lg-3 > .card:hover, #content .row.g-3 > .col-lg-4 > .card:hover {
        transform: translateY(-3px);
        border-color: rgba(36,200,255,.34) !important
    }

.icon-shape {
    background: linear-gradient(135deg,rgba(17,104,255,.9),rgba(36,200,255,.85)) !important;
    box-shadow: 0 10px 28px rgba(17,104,255,.2)
}

#content .btn {
    border-radius: 12px !important;
    font-weight: 700;
    letter-spacing: .15px;
    min-height: 44px
}

.btn-danger {
    background: linear-gradient(135deg,#0e5fe7,#23bcea) !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(17,104,255,.18)
}

@media(min-width:992px) {
    #content {
        margin-left: 270px !important;
        width: calc(100% - 270px) !important
    }

    .topbar {
        left: 270px !important
    }

    .sidebar.sidebar-collapsed {
        width: 88px !important
    }

        .sidebar.sidebar-collapsed .nx-brand-logo {
            object-position: center;
            max-width: 56px
        }

        .sidebar.sidebar-collapsed + #content {
            margin-left: 88px !important;
            width: calc(100% - 88px) !important
        }
}

@media(max-width:991.98px) {
    .topbar {
        height: 64px !important;
        padding: 0 12px !important
    }

    .content {
        padding-top: 82px !important
    }

    .sidebar {
        width: min(286px,86vw) !important
    }

    .logo-area.nx-logo-area {
        height: 76px
    }

    .nx-brand-logo {
        height: 50px;
        max-width: 190px
    }

    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important
    }

    .card {
        border-radius: 15px !important
    }
}

@media(max-width:575.98px) {
    h1 {
        font-size: 1.6rem !important
    }

    .card-body {
        padding: 16px !important
    }

    #content .btn.btn-lg {
        width: 100%;
        margin: 6px 0 !important
    }

    .row.g-3 {
        --bs-gutter-y: .75rem
    }

    .form-control {
        font-size: 13px !important
    }

    .topbar .avatar {
        width: 34px !important;
        height: 34px !important
    }
}

/* Buy Package progressive slot presentation */
#loginSection > h3 {
    text-align: center;
    font-size: 1rem;
    color: var(--nx-muted) !important;
    margin-bottom: 18px
}

.package-sequential-note {
    color: var(--nx-muted)
}

#loginSection .row.g-3 {
    justify-content: center
}

    #loginSection .row.g-3 > .col-xl-3 {
        flex: 0 0 min(100%,420px);
        max-width: 420px
    }

#loginSection .card {
    padding: 28px !important;
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.98)) !important;
    border-color: rgba(36,200,255,.28) !important;
    text-align: center
}

    #loginSection .card h2 {
        font-size: 14px !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--nx-cyan2) !important
    }

    #loginSection .card h3 {
        font-size: 2rem !important
    }

/* =========================================================
   SIDEBAR / TOPBAR RESPONSIVE FIX - 2026-09-14
   Compatible with existing main.js classes: collapsed/full/mobile-show/show
   ========================================================= */
#sidebar.sidebar {
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: 270px !important;
    padding-top: 0 !important;
    z-index: 1050 !important;
    transition: width .25s ease,transform .25s ease !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

#topbar.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 270px !important;
    right: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    z-index: 1035 !important;
    transition: left .25s ease !important;
}

#content.content {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
    min-width: 0 !important;
    transition: margin-left .25s ease,width .25s ease !important;
}

#overlay.overlay {
    z-index: 1040 !important;
    background: rgba(15,35,60,.28) !important;
    backdrop-filter: blur(4px) !important;
}

/* Existing main.js toggles .collapsed on sidebar and .full on topbar/content */
@media (min-width:992px) {
    #sidebar.sidebar.collapsed {
        width: 88px !important;
    }

        #sidebar.sidebar.collapsed .nav-text,
        #sidebar.sidebar.collapsed .logo-text {
            display: none !important;
        }

        #sidebar.sidebar.collapsed .nav-link {
            justify-content: center !important;
            padding: 12px !important;
            margin: 3px 12px !important;
        }

            #sidebar.sidebar.collapsed .nav-link i {
                margin: 0 !important;
                font-size: 22px !important;
            }

        #sidebar.sidebar.collapsed .nx-brand-logo {
            max-width: 58px !important;
            height: 48px !important;
            object-position: center !important;
        }

        #sidebar.sidebar.collapsed .nx-brand {
            justify-content: center !important;
        }

    #topbar.topbar.full {
        left: 88px !important;
        margin-left: 0 !important;
    }

    #content.content.full {
        margin-left: 88px !important;
        width: calc(100% - 88px) !important;
    }
}

@media (max-width:991.98px) {
    html, body {
        overflow-x: hidden !important;
    }

    #sidebar.sidebar {
        width: min(300px,86vw) !important;
        left: 0 !important;
        transform: translateX(-105%) !important;
        box-shadow: 24px 0 65px rgba(31,70,120,.16) !important;
    }

        #sidebar.sidebar.mobile-show {
            transform: translateX(0) !important;
        }

    #topbar.topbar,
    #topbar.topbar.full {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #content.content,
    #content.content.full {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #content .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    #sidebar .nav-link {
        min-height: 48px !important;
        padding: 12px 16px !important;
        margin: 2px 10px !important;
    }

    #sidebar .nav-text {
        display: inline !important;
    }
}

@media (max-width:575.98px) {
    #topbar.topbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .nx-top-brand {
        max-width: 145px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

        .nx-top-brand img {
            width: 128px !important;
            max-width: 100% !important;
            height: 40px !important;
        }

    #content.content {
        padding-top: 78px !important;
    }

    #content .container-fluid {
        /*padding-left: 12px !important;
        padding-right: 12px !important;*/
    }
}

/* Dashboard content hardening on phones/tablets */
#content img {
    max-width: 100%;
    height: auto;
}

#content .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#content .input-group {
    min-width: 0;
}

#content .form-control {
    min-width: 0;
}

#content .card {
    max-width: 100%;
}

/* Transparent master logo presentation - 2026-09-14 */
.logo-area.nx-logo-area {
    background: transparent !important;
    box-shadow: none !important
}

.nx-brand, .nx-top-brand {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important
}

.nx-transparent-logo, .nx-brand-logo {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    filter: none !important;
    mix-blend-mode: normal !important
}

.nx-brand-logo {
    object-fit: contain !important
}
/* NEXVIA transparent brand treatment */
.nx-logo-area, .nx-brand, .nx-top-brand {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important
}

.nx-brand-logo, .nx-transparent-logo {
    background: transparent !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 18px rgba(0,153,255,.18))
}

\n\n /* ===== NEXVIA MOBILE AUTH + PROFESSIONAL SIDEBAR 2026-09-15 ===== */
.nx-auth-body {
    margin: 0 !important;
    background: #f5f8fc !important;
    min-height: 100dvh;
    color: #fff !important
}

.nx-auth-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px,44%) 1fr;
    background: radial-gradient(circle at 18% 22%,rgba(0,166,255,.18),transparent 32%),#f5f8fc
}

.nx-auth-visual {
    position: relative;
    overflow: hidden;
    padding: 38px 7%;
    border-right: 1px solid rgba(50,190,255,.16);
    background: linear-gradient(145deg,rgba(247,251,255,.98),rgba(238,246,255,.98))
}

    .nx-auth-visual:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(36,200,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(36,200,255,.035) 1px,transparent 1px);
        background-size: 38px 38px;
        mask-image: linear-gradient(to bottom,#000,transparent)
    }

.nx-auth-brand, .nx-auth-visual-copy {
    position: relative;
    z-index: 1
}

    .nx-auth-brand img {
        width: min(230px,65%);
        height: 82px;
        object-fit: contain;
        object-position: left center
    }

.nx-auth-visual-copy {
    max-width: 560px;
    margin: 12vh auto 0
}

.nx-auth-kicker {
    font-size: 11px;
    letter-spacing: 2.6px;
    color: #f3bf4c;
    font-weight: 800
}

.nx-auth-visual h1 {
    font-size: clamp(38px,4vw,68px) !important;
    line-height: 1.02;
    margin: 16px 0 !important;
    background: linear-gradient(90deg,#000f8b 15%,#f00 70%,#f2c14f);
    -webkit-background-clip: text;
    color: transparent !important
}

.nx-auth-visual p {
    max-width: 470px;
    color: #91a9c5 !important;
    font-size: 16px
}

.nx-auth-image {
    margin-top: 30px;
    max-width: 440px
}

    .nx-auth-image img {
        max-height: 300px;
        width: 100%;
        object-fit: contain;
        filter: drop-shadow(0 22px 45px rgba(0,136,255,.2))
    }

.nx-auth-form-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 38px 24px;
    position: relative
}

.nx-auth-mobile-head {
    display: none
}

.nx-auth-card {
    width: min(100%,480px);
    padding: 34px;
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,251,255,.98));
    border: 1px solid rgba(55,195,255,.2);
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(31,70,120,.14),inset 0 1px rgba(255,255,255,.03)
}

    .nx-auth-card > .card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important
    }

        .nx-auth-card > .card > .card-body {
            padding: 0 !important
        }

.nx-auth-card-logo {
    text-align: center;
    margin-bottom: 20px
}

    .nx-auth-card-logo img {
        width: 190px;
        height: 70px;
        object-fit: contain
    }

.nx-auth-card .px-3, .nx-auth-card .py-3 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.nx-auth-card h3 {
    font-size: 28px !important
}

.nx-auth-card .text-muted {
    color: #282828 !important;
}

.nx-auth-card .btn {
    /* min-height: 52px;*/
    border-radius: 13px !important
}

.nx-auth-card .row#connectSection {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.nx-auth-card #connectSection .col-12 {
    padding: 0 !important
}

.nx-auth-card #connectSection .btn .row {
    align-items: center
}

.nx-auth-foot {
    position: absolute;
    bottom: 18px;
    color: #71849b;
    font-size: 11px;
    letter-spacing: .5px
}

/* Sidebar: premium grouped navigation */
#sidebar.sidebar {
    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 55%,#eef5ff 100%) !important;
    border-right: 1px solid rgba(52,190,255,.14) !important;
    padding-bottom: 18px !important
}

#sidebar .nx-logo-area {
    background: linear-gradient(180deg,rgba(15,43,72,.65),rgba(6,23,42,.2));
    border-bottom: 1px solid rgba(52,190,255,.12) !important
}

#sidebar .nav {
    padding: 12px 10px 28px !important;
    gap: 2px
}

.nx-menu-label {
    list-style: none;
    padding: 17px 14px 6px !important
}

    .nx-menu-label small {
        font-size: 9px !important;
        letter-spacing: 2px !important;
        font-weight: 800 !important;
        color: #8495a8 !important
    }

#sidebar .nav-link {
    position: relative;
    margin: 1px 0 !important;
    border: 1px solid transparent;
    border-radius: 12px !important;
    min-height: 47px !important;
    padding: 11px 13px !important;
    color: #52677f !important;
    font-size: 13px;
    font-weight: 650 !important;
    transition: .18s ease !important
}

    #sidebar .nav-link i {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: rgba(34,190,255,.07);
        font-size: 18px !important;
        color: #0b8fd3 !important
    }

    #sidebar .nav-link:hover {
        transform: translateX(2px);
        background: rgba(30,171,255,.075) !important;
        border-color: rgba(54,195,255,.12) !important;
        color: #fff !important
    }

    #sidebar .nav-link.active {
        background: linear-gradient(90deg,rgba(19,113,255,.24),rgba(29,207,255,.08)) !important;
        border-color: rgba(48,194,255,.2) !important;
        color: #fff !important;
        box-shadow: inset 3px 0 #28c9ff
    }

        #sidebar .nav-link.active i {
            background: linear-gradient(135deg,#126dff,#23c8ff);
            color: #fff !important;
            box-shadow: 0 7px 18px rgba(14,124,255,.22)
        }

#sidebar .nx-logout-link {
    margin-top: 2px !important;
    color: #ff9ea8 !important
}

    #sidebar .nx-logout-link i {
        color: #ff8290 !important;
        background: rgba(255,80,100,.08)
    }

@media(max-width:991.98px) {
    .nx-auth-shell {
        display: block;
        min-height: 100dvh
    }

    .nx-auth-visual {
        display: none
    }

    .nx-auth-form-side {
        min-height: 100dvh;
        padding: 92px 16px 42px;
        justify-content: flex-start;
        background: radial-gradient(circle at 50% 4%,rgba(20,142,255,.18),transparent 32%),#f5f8fc
    }

    .nx-auth-mobile-head {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        top: 0;
        left: 0;
        right: 0;
        height: 74px;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(52,190,255,.12);
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(15px)
    }

        .nx-auth-mobile-head img {
            width: 145px;
            height: 54px;
            object-fit: contain;
            object-position: left center
        }

    .nx-auth-home {
        padding: 9px 14px;
        border: 1px solid rgba(50,196,255,.25);
        border-radius: 10px;
        text-decoration: none !important;
        font-size: 12px;
        font-weight: 700
    }

    .nx-auth-card {
        width: 100%;
        max-width: 520px;
        padding: 26px 22px;
        border-radius: 20px
    }

    .nx-auth-card-logo img {
        width: 165px;
        height: 62px
    }

    .nx-auth-foot {
        position: static;
        margin-top: 28px;
        text-align: center
    }

    #sidebar.sidebar {
        width: min(318px,88vw) !important
    }

    .nx-logo-area {
        position: sticky !important;
        top: 0;
        z-index: 2;
        background: #ffffff !important
    }

    .nx-sidebar-close {
        background: rgba(255,255,255,.05) !important;
        border-color: rgba(56,197,255,.2) !important
    }

    .nx-menu-label {
        padding-top: 14px !important
    }
}

@media(max-width:575.98px) {
    .nx-auth-form-side {
        padding: 86px 12px 30px
    }

    .nx-auth-card {
        padding: 22px 16px;
        border-radius: 17px
    }

    .nx-auth-card-logo {
        margin-bottom: 10px
    }

        .nx-auth-card-logo img {
            width: 145px;
            height: 54px
        }

    .nx-auth-card h3 {
        font-size: 24px !important
    }

    .nx-auth-card .px-3.py-3 {
        padding-top: 6px !important;
        padding-bottom: 6px !important
    }

    .nx-auth-card .mt-4 {
        margin-top: 1rem !important
    }

    .nx-auth-card .pt-2, .nx-auth-card .pt-3 {
        padding-top: .35rem !important
    }

    .nx-auth-card #connectSection .btn {
        padding: 9px 10px !important
    }

        .nx-auth-card #connectSection .btn .col-sm-2 {
            width: 48px;
            display: flex !important
        }

        .nx-auth-card #connectSection .btn .col-sm-10 {
            width: calc(100% - 48px);
            display: flex !important;
            text-align: left
        }

    .nx-auth-card #connectSection img {
        max-height: 28px !important
    }

    #topbar.topbar {
        height: 64px !important;
    }

    .nx-top-brand img {
        width: 120px !important;
        height: 42px !important
    }

    #sidebar .nav-link {
        min-height: 45px !important;
        font-size: 12.5px !important
    }
}

/* ==========================================================================
   NEXVIA — premium redesign pass (design-only; no markup logic touched)
   Layout language ported from the E2C WORLD panel (ticker / status-strip /
   glass topbar / premium cards) and recoloured to the NEXVIA blue-cyan-gold palette.
   ========================================================================== */
html, body, .nx-app-shell {
    font-family: "Plus Jakarta Sans",Inter,"Segoe UI",Arial,sans-serif !important
}

.card-title, .card-header, .dropdown-header {
    font-family: "Plus Jakarta Sans",Inter,sans-serif !important
}

/* live market ticker */
.nx-market-ticker, .nx-auth-ticker {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 32px;
    background: #ffffff;
    border-bottom: 1px solid var(--nx-line);
    z-index: 1091;
    overflow: hidden;
    display: flex;
    align-items: center
}

.nx-ticker-track, .nx-auth-ticker-track {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 28px;
    padding: 0 20px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #71849b;
    text-transform: uppercase
}

    .nx-ticker-track b, .nx-auth-ticker-track b {
        color: var(--nx-white);
        margin-left: 5px;
        font-size: 11.5px
    }

    .nx-ticker-track em, .nx-auth-ticker-track em {
        font-style: normal;
        margin-left: 5px
    }

    .nx-ticker-track .up, .nx-auth-ticker-track .up {
        color: #2be08a !important
    }

    .nx-ticker-track .down, .nx-auth-ticker-track .down {
        color: #ff6b7d !important
    }

/* push chrome below the ticker */
#topbar.topbar {
    /*! top: 32px !important */
}

#sidebar.sidebar {
    /*! top: 32px !important; */
    height: calc(100vh - 32px) !important
}

.content {
    padding-top: 128px !important
}

@media(min-width:992px) {
    .topbar {
        left: 270px !important
    }
}

@media(max-width:991.98px) {
    #topbar.topbar, #sidebar.sidebar {
        /*! top: 30px !important */
    }

    .content {
        padding-top: 114px !important
    }
}

@media(max-width:575.98px) {
    .nx-market-ticker, .nx-auth-ticker {
        height: 28px
    }

    .nx-ticker-track, .nx-auth-ticker-track {
        gap: 22px;
        font-size: 9px
    }

    #topbar.topbar, #sidebar.sidebar {
        /*! top: 28px !important */
    }

    .content {
        padding-top: 108px !important
    }
}

/* glass topbar */
#topbar.topbar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(31,70,120,.10)
}

/* live network status strip (sits above every inner page) */
.nx-status-strip {
    display:none!important;
    height: 40px;
    border: 1px solid var(--nx-line);
    border-radius: 24px;
    background: linear-gradient(90deg,rgba(17,104,255,.10),rgba(245,249,255,.94));
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: var(--nx-cyan2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    margin-bottom: 22px
}

    .nx-status-strip span {
        width: 11px;
        height: 11px;
        background: #2be08a;
        border-radius: 50%;
        margin-right: 11px;
        box-shadow: 0 0 12px rgba(43,224,138,.55)
    }

    .nx-status-strip b {
        color: var(--nx-muted);
        margin: 0 5px
    }

    .nx-status-strip em {
        font-style: normal;
        color: var(--nx-gold);
        margin-left: 5px
    }

@media(max-width:575.98px) {
    .nx-status-strip {
        font-size: 9px;
        white-space: nowrap;
        overflow: hidden
    }
}

/* premium card top-accent + lift */
.card {
    position: relative
}

    .card:before {
        content: "";
        position: absolute;
        top: 0;
        left: 16px;
        right: 16px;
        height: 2px;
        background: linear-gradient(90deg,var(--nx-blue),var(--nx-cyan) 55%,var(--nx-gold));
        border-radius: 3px;
        opacity: .9
    }

#loginSection .card:before, .nx-auth-card:before {
    left: 0;
    right: 0
}

/* premium buttons */
#content .btn-primary, #content .btn-success, #content .btn-info {
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 13px
}

/* premium tables */
.table thead th {
    letter-spacing: .5px;
    font-weight: 800;
    font-size: 11.5px
}

.table tbody tr:hover {
    background: rgba(36,200,255,.05) !important
}

/* auth hero — live pill / feature list / coin pills */
.nx-live-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border: 1px solid rgba(43,224,138,.35);
    border-radius: 20px;
    color: #2be08a;
    background: rgba(43,224,138,.08);
    padding: 6px 13px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    margin-bottom: 16px
}

    .nx-live-pill span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2be08a;
        margin-right: 8px;
        box-shadow: 0 0 0 4px rgba(43,224,138,.16)
    }

.nx-auth-features {
    margin-top: 26px;
    display: grid;
    gap: 13px
}

    .nx-auth-features > div {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #52677f;
        font-size: 13.5px
    }

    .nx-auth-features i {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border: 1px solid rgba(52,190,255,.28);
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--nx-cyan);
        background: rgba(34,190,255,.07);
        font-size: 17px
    }

.nx-auth-coins {
    display: flex;
    gap: 11px;
    margin-top: 24px;
    flex-wrap: wrap
}

    .nx-auth-coins > div {
        min-width: 120px;
        border: 1px solid var(--nx-line);
        background: rgba(247,251,255,.96);
        border-radius: 10px;
        padding: 10px 14px
    }

    .nx-auth-coins small {
        display: block;
        color: #71849b;
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: 1.1px
    }

    .nx-auth-coins strong {
        display: block;
        color: var(--nx-cyan2);
        font-size: 15.5px;
        margin-top: 4px
    }

@media(max-width:991.98px) {
    .nx-auth-features, .nx-auth-coins {
        display: none
    }

    .nx-live-pill {
        margin-bottom: 12px
    }
}

/* offset auth shell for the ticker bar */
.nx-auth-shell {
    padding-top: 32px
}

@media(max-width:991.98px) {
    .nx-auth-shell {
        padding-top: 0
    }

    .nx-auth-mobile-head {
        /*! top: 30px !important */
    }

    .nx-auth-form-side {
        padding-top: 104px !important
    }
}

@media(max-width:575.98px) {
    .nx-auth-mobile-head {
        /*! top: 28px !important; */
    }
}

/* ==========================================================================
   NEXVIA — dashboard hero + stat-grid composition (monitor.aspx only)
   Structure ported from the E2C WORLD dashboard hero/stat-grid pattern,
   recoloured to the NEXVIA blue/cyan/gold palette. No control IDs touched.
   ========================================================================== */
.nx-dashboard-page {
    padding: 4px 0 26px
}

.nx-dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 240px;
    min-height: 230px;
    border: 1px solid var(--nx-line);
    border-top: 2px solid var(--nx-blue);
    border-radius: 20px;
    background: linear-gradient(110deg,rgba(8,25,44,.98),rgba(247,251,255,.98) 58%,rgba(232,244,255,.92));
    overflow: hidden;
    box-shadow: 0 24px 66px rgba(31,70,120,.12);
    padding: 32px 36px;
    margin-bottom: 24px
}

    .nx-dashboard-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 88% 50%,rgba(36,200,255,.16),transparent 25%),linear-gradient(90deg,transparent 0 56%,rgba(36,200,255,.02) 56% 57%,transparent 57%);
        pointer-events: none
    }

.nx-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 860px
}

.nx-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nx-cyan2);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    border: 1px solid rgba(36,200,255,.28);
    background: rgba(36,200,255,.06);
    padding: 7px 11px;
    border-radius: 99px
}

.nx-hero-copy h2 {
    font-size: 32px !important;
    line-height: 1.06;
    margin: 16px 0 8px !important;
    font-weight: 900 !important;
    letter-spacing: -.7px;
    background: linear-gradient(90deg,#fff,var(--nx-cyan2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important
}

.nx-hero-copy > p {
    color: var(--nx-muted) !important;
    font-size: 14px;
    max-width: 680px;
    margin-bottom: 22px
}

.nx-contract-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    max-width: 960px
}

.nx-contract-item {
    min-width: 0;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 12px 14px
}

    .nx-contract-item span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--nx-muted) !important;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase
    }

        .nx-contract-item span i {
            color: var(--nx-cyan);
            font-size: 16px
        }

    .nx-contract-item strong {
        display: block;
        margin-top: 6px;
        color: var(--nx-white) !important;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.nx-hero-emblem {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center
}

.nx-coin-ring {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--nx-blue);
    background: radial-gradient(circle at 36% 30%,var(--nx-cyan2) 0 4%,var(--nx-blue) 30%,#051022 65%,#020712 78%);
    box-shadow: 0 0 0 10px rgba(36,200,255,.08),0 0 0 12px rgba(36,200,255,.22),0 20px 50px rgba(17,104,255,.24),inset 0 0 24px rgba(111,228,255,.25);
    color: #fff;
    text-shadow: 0 2px 8px #000
}

    .nx-coin-ring:before {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border: 1px solid rgba(36,200,255,.28);
        border-radius: 50%;
        box-shadow: 0 0 32px rgba(36,200,255,.16)
    }

    .nx-coin-ring span {
        font-size: 42px;
        font-weight: 1000;
        letter-spacing: -2px
    }

    .nx-coin-ring small {
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 3.5px;
        color: var(--nx-cyan2)
    }

.nx-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 24px 0 12px;
    padding-left: 14px;
    border-left: 3px solid var(--nx-blue)
}

    .nx-section-heading span {
        display: block;
        color: var(--nx-gold);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.7px
    }

    .nx-section-heading h3 {
        font-size: 17px !important;
        font-weight: 900 !important;
        margin: 2px 0 0 !important;
        color: var(--nx-white) !important
    }

    .nx-section-heading small {
        color: var(--nx-muted) !important;
        font-size: 10px
    }

.nx-quick-actions {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

.nx-action-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 68px;
    border: 1px solid var(--nx-line) !important;
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.98)) !important;
    color: var(--nx-white) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: .2s ease;
    box-shadow: none !important
}

    .nx-action-btn i {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(36,200,255,.26);
        background: rgba(36,200,255,.08);
        color: var(--nx-cyan);
        font-size: 19px
    }

    .nx-action-btn:hover {
        transform: translateY(-2px);
        border-color: var(--nx-blue) !important;
        color: #fff !important;
        box-shadow: 0 12px 25px rgba(31,70,120,.10) !important
    }

        .nx-action-btn:hover i {
            background: var(--nx-blue);
            color: #fff
        }

.nx-action-accent {
    border-color: rgba(240,185,74,.4) !important;
    background: linear-gradient(135deg,rgba(111,78,4,.28),rgba(11,17,25,.9)) !important
}

    .nx-action-accent i {
        border-color: rgba(240,185,74,.4);
        background: rgba(240,185,74,.1);
        color: var(--nx-gold)
    }

.nx-action-button {
    width: 100%;
    text-align: left
}

.nx-stat-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 15px
}

.nx-stat-card {
    position: relative;
    min-height: 140px;
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.98)) !important;
    border: 1px solid var(--nx-line) !important;
    border-radius: 16px;
    padding: 19px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(31,70,120,.10)
}

    .nx-stat-card:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,var(--nx-blue),var(--nx-cyan) 55%,var(--nx-gold))
    }

    .nx-stat-card:after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        right: -36px;
        bottom: -40px;
        background: radial-gradient(circle,rgba(36,200,255,.12),transparent 68%)
    }

.nx-stat-icon {
    position: absolute;
    left: 19px;
    top: 18px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,rgba(36,200,255,.14),rgba(36,200,255,.03));
    border: 1px solid rgba(36,200,255,.28);
    color: var(--nx-cyan2)
}

    .nx-stat-icon i {
        font-size: 19px
    }

.nx-stat-card > em {
    position: absolute;
    right: 15px;
    top: 22px;
    border: 1px solid var(--nx-line);
    border-radius: 99px;
    background: rgba(36,200,255,.06);
    color: #71849b;
    padding: 4px 8px;
    font-size: 8px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: .7px
}

.nx-stat-copy {
    position: relative;
    z-index: 2;
    margin-top: 46px
}

    .nx-stat-copy span {
        display: block;
        color: var(--nx-muted) !important;
        font-size: 9.5px;
        letter-spacing: .6px;
        font-weight: 800;
        margin-bottom: 6px
    }

    .nx-stat-copy strong {
        display: block;
        color: var(--nx-cyan2) !important;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -.4px;
        word-break: break-word
    }

.nx-stat-card:nth-child(4n+2) .nx-stat-copy strong, .nx-stat-card:nth-child(4n+2) .nx-stat-icon {
    color: var(--nx-gold) !important
}

.nx-stat-card:nth-child(4n+3) .nx-stat-copy strong, .nx-stat-card:nth-child(4n+3) .nx-stat-icon {
    color: #8ef0c2 !important
}

.nx-stat-card:nth-child(4n+4) .nx-stat-copy strong, .nx-stat-card:nth-child(4n+4) .nx-stat-icon {
    color: #9db8ff !important
}

@media(max-width:1399.98px) {
    .nx-stat-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media(max-width:991.98px) {
    .nx-dashboard-hero {
        grid-template-columns: 1fr;
        padding: 26px
    }

    .nx-hero-emblem {
        display: none
    }

    .nx-contract-grid {
        grid-template-columns: 1fr
    }

    .nx-stat-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .nx-quick-actions {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:575.98px) {
    .nx-dashboard-hero {
        padding: 20px 16px;
        border-radius: 15px
    }

    .nx-hero-copy h2 {
        font-size: 25px !important
    }

    .nx-section-heading small {
        display: none
    }

    .nx-stat-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .nx-stat-card {
        min-height: 126px
    }

    .nx-quick-actions {
        grid-template-columns: 1fr 1fr;
        gap: 9px
    }

    .nx-action-btn {
        min-height: 62px;
        padding: 11px;
        font-size: 10px
    }

        .nx-action-btn i {
            width: 32px;
            height: 32px;
            flex-basis: 32px
        }

    .nx-contract-item strong {
        font-size: 9px
    }
}

/* ==========================================================================
   NEXVIA — dashboard entrance animation + decoration (monitor.aspx)
   Pure CSS/decorative layer — no control IDs or logic touched.
   ========================================================================== */
@keyframes nxFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.97)
    }

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

@keyframes nxHeroIn {
    from {
        opacity: 0;
        transform: translateY(-14px)
    }

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

@keyframes nxRingPulse {
    0%,100% {
        box-shadow: 0 0 0 10px rgba(36,200,255,.08),0 0 0 12px rgba(36,200,255,.22),0 20px 50px rgba(17,104,255,.24),inset 0 0 24px rgba(111,228,255,.25)
    }

    50% {
        box-shadow: 0 0 0 14px rgba(36,200,255,.13),0 0 0 17px rgba(36,200,255,.3),0 24px 60px rgba(17,104,255,.34),inset 0 0 30px rgba(111,228,255,.4)
    }
}

@keyframes nxOrbFloat {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-14px,10px) scale(1.08)
    }
}

@keyframes nxShimmer {
    0% {
        background-position: -180% 0
    }

    100% {
        background-position: 180% 0
    }
}

@keyframes nxIconGlow {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(36,200,255,.22)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(36,200,255,.05)
    }
}

@keyframes nxDot {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .45;
        transform: scale(.7)
    }
}

.nx-dashboard-hero {
    animation: nxHeroIn .6s cubic-bezier(.2,.8,.2,1) both
}

    .nx-dashboard-hero:after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: 8%;
        top: -40px;
        background: radial-gradient(circle,rgba(36,200,255,.14),transparent 70%);
        animation: nxOrbFloat 7s ease-in-out infinite;
        pointer-events: none
    }

.nx-coin-ring {
    animation: nxRingPulse 3.2s ease-in-out infinite
}

.nx-hero-kicker {
    position: relative
}

    .nx-hero-kicker:before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #2be08a;
        margin-right: 2px;
        animation: nxDot 1.6s ease-in-out infinite
    }

.nx-section-heading {
    animation: nxFadeUp .5s ease both
}

.nx-quick-actions .nx-action-btn {
    opacity: 0;
    animation: nxFadeUp .5s cubic-bezier(.2,.8,.2,1) both
}

    .nx-quick-actions .nx-action-btn:nth-child(1) {
        animation-delay: .05s
    }

    .nx-quick-actions .nx-action-btn:nth-child(2) {
        animation-delay: .12s
    }

    .nx-quick-actions .nx-action-btn:nth-child(3) {
        animation-delay: .19s
    }

    .nx-quick-actions .nx-action-btn:nth-child(4) {
        animation-delay: .26s
    }

    .nx-quick-actions .nx-action-btn:nth-child(5) {
        animation-delay: .33s
    }

    .nx-quick-actions .nx-action-btn:nth-child(6) {
        animation-delay: .4s
    }

.nx-stat-grid .nx-stat-card {
    opacity: 0;
    animation: nxFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
    transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease
}

    .nx-stat-grid .nx-stat-card:nth-child(1) {
        animation-delay: .04s
    }

    .nx-stat-grid .nx-stat-card:nth-child(2) {
        animation-delay: .09s
    }

    .nx-stat-grid .nx-stat-card:nth-child(3) {
        animation-delay: .14s
    }

    .nx-stat-grid .nx-stat-card:nth-child(4) {
        animation-delay: .19s
    }

    .nx-stat-grid .nx-stat-card:nth-child(5) {
        animation-delay: .24s
    }

    .nx-stat-grid .nx-stat-card:nth-child(6) {
        animation-delay: .29s
    }

    .nx-stat-grid .nx-stat-card:nth-child(7) {
        animation-delay: .34s
    }

    .nx-stat-grid .nx-stat-card:nth-child(8) {
        animation-delay: .39s
    }

    .nx-stat-grid .nx-stat-card:nth-child(9) {
        animation-delay: .44s
    }

    .nx-stat-grid .nx-stat-card:nth-child(10) {
        animation-delay: .49s
    }

    .nx-stat-grid .nx-stat-card:nth-child(11) {
        animation-delay: .54s
    }

    .nx-stat-grid .nx-stat-card:nth-child(12) {
        animation-delay: .59s
    }

.nx-stat-card:before {
    background-size: 250% 100%;
    animation: nxShimmer 3.6s linear infinite
}

.nx-stat-icon {
    animation: nxIconGlow 2.6s ease-in-out infinite
}

.nx-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(36,200,255,.5) !important;
    box-shadow: 0 20px 42px rgba(31,70,120,.14),0 0 0 1px rgba(36,200,255,.18) !important
}

    .nx-stat-card:hover .nx-stat-icon {
        animation-play-state: paused;
        background: linear-gradient(145deg,rgba(36,200,255,.28),rgba(36,200,255,.06));
        transform: scale(1.06)
    }

.nx-stat-copy strong {
    transition: color .2s ease
}

@media(prefers-reduced-motion:reduce) {
    .nx-dashboard-hero, .nx-coin-ring, .nx-hero-kicker:before, .nx-section-heading, .nx-quick-actions .nx-action-btn, .nx-stat-grid .nx-stat-card, .nx-stat-card:before, .nx-stat-icon, .nx-dashboard-hero:after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}