#preloader {
    background-color: #04130C !important;
}

[data-nav-headerbg="color_4"][data-theme-version="dark"] .nav-control, [data-nav-headerbg="color_4"] .nav-control {
    background: transparent;
}

.feature-box {
    background: linear-gradient(#2DEF9F, #0B8F8F);
}

    .feature-box .wallet-box {
        display: flex;
        align-items: center;
        background-color: #04130C !important;
    }

[data-sidebar-style="overlay"] .nav-header .hamburger.is-active {
    color: #fff !important;
}

    [data-sidebar-style="overlay"] .nav-header .hamburger.is-active .line {
        background-color: #fff !important;
    }

.dlabnav {
    background-color: #04130C !important;
}

    .dlabnav .metismenu > li.mm-active > a {
        background: #01331C !important;
        color: #fff !important;
    }

    .dlabnav .main-menu {
        color: #2DEF9F !important;
    }

.support-box {
    /*background: linear-gradient(180deg, #046E3E 0%, #046E3E 100%) !important;*/
    background: linear-gradient(180deg, #07D679 0%, #FC354C 100%) !important;
}


.bg-gr {
    background: #011808 !important;
    color: #fff !important;
}

.support-box .media span {
    height: 5rem;
    width: 5rem;
    font-size: 3.125rem;
    display: block;
    background: #046E3E !important;
}

* {
    /* --nav-headbg: #103420;
    --sidebar-bg: #103420;
    --headerbg: #046E3E;*/
    --card: #04130C;
    /*    --text-dark: #fff;
    --text-gray: #b3b3b3;
    --text: #8FAE9F;*/
    --body-bg: #000000;
    /*--light: #0C2418;
    --border: #15402A;
    --bs-border-color: #15402A;
    --bs-tertiary-bg: #15402A;*/
}

.text-gr {
    color: #ffffff !important;
}

.nav-header {
    background-color: #04130C !important;
}

.dlabnav .metismenu > li.mm-active > a {
    font-weight: 500;
    background: #01331C !important;
    color: #fff !important;
}

.dlabnav .metismenu > li:hover > a, .dlabnav .metismenu > li:focus > a {
    color: #07D679 !important;
}

.header.is-fixed .header-content {
    background-color: #000000 !important;
}

body {
    background: #000000 !important;
}

[data-headerbg="color_1"] .header:not(.home) {
    background-color: #000000 !important;
}

.bg-pink, .footer {
    /* background: linear-gradient(180deg, #046E3E 0%, #046E3E 100%);*/
     background: linear-gradient(90deg, #07D679 0%, #FC354C 100%) !important;
}

.bg-pink-1 {
    background: linear-gradient(180deg, #0E2A1B 0%, #7D091D 100%) !important;
}

.bg-pink-2 {
    background: linear-gradient(180deg, #0C2418 0%, #07D679 100%) !important;
}

.bg-pink-3 {
    background: linear-gradient(180deg, #0E2A1B 0%, #7D091D 100%) !important;
}

.bg-pink-4 {
    background: linear-gradient(90deg, #0E2A1B 0%, #081A11 100%);
}

    .text-gr {
        color: #ffffff !important;
    }

.btn-gr, .btn-success {
    border-color: #fff;
   /* background: linear-gradient(180deg, #046E3E 0%, #046E3E 100%);*/
    color: #ffffff !important;
}

.form-label, b, label {
    color: #ffffff !important;
    margin-bottom: 0.5rem;
}

.form-control {
    background: #04130C;
    color: #ffffff !important;
    line-height: 1.7;
    font-size: 0.9rem;
    border-color: #777c84;
    height: 2.75rem;
    border-radius: 0.5rem;
}

    .form-control:disabled, .form-control[readonly] {
        background: #04130C;
        opacity: 1;
        border-color: #777c84;
    }

    .form-control:hover, .form-control:focus, .form-control.active {
        box-shadow: none;
        background: #000000;
        color: #ffffff;
        border-color: #ffffff;
    }

.page-titles {
    margin-top: 60px;
}

.content-body .container-fluid, .content-body .container-sm, .content-body .container-md, .content-body .container-lg, .content-body .container-xl, .content-body .container-xxl {
    padding-top: 0.5rem;
}

/* =========================================================
   TheCentx App UI Refresh
   - Presentation-only UI layer: no ASP.NET logic or DB changes
   - Mobile-app inspired shell, cards, tables, forms and navigation
   ========================================================= */
:root {
    --app-shell-max: 620px;
    --app-bg: #05140D;
    --app-bg-2: #081A11;
    --app-panel: rgba(8,28,18, 0.78);
    --app-panel-strong: rgba(12,36,24, 0.94);
    --app-panel-soft: rgba(255, 255, 255, 0.055);
    --app-border: rgba(255, 255, 255, 0.11);
    --app-border-strong: rgba(255, 255, 255, 0.18);
    --app-text: #f7fbff;
    --app-muted: #8FAE9F;
    --app-muted-2: #5F7568;
    --app-primary: #2DEF9F;
    --app-primary-2: #046E3E;
    --app-cyan: #2DEF9F;
    --app-success: #2DEF9F;
    --app-warning: #FFD137;
    --app-danger: #ff5d6c;
    --app-radius: 24px;
    --app-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    --app-font: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (min-width: 1180px) {
    :root { --app-shell-max: 760px; }
}

html,
body {
    min-height: 100%;
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    font-family: var(--app-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body {
    overflow-x: hidden;
}

body.thecentx-app::before,
body.thecentx-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% -10%, rgba(45,239,159, 0.33), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(4,110,62, 0.30), transparent 30%),
        radial-gradient(circle at 50% 110%, rgba(45,239,159, 0.13), transparent 36%),
        linear-gradient(160deg, #05140D 0%, #08160F 48%, #03100A 100%);
}

body.thecentx-app::after,
body.thecentx-auth::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 100%);
}

body.thecentx-app form#form1 > .relative.flex.min-h-screen,
body.thecentx-app > .relative.flex.min-h-screen {
    width: min(100%, var(--app-shell-max));
    min-height: 100svh;
    margin-inline: auto;
    background:
        radial-gradient(circle at top right, rgba(45,239,159,0.22), transparent 28%),
        linear-gradient(180deg, rgba(8,26,16, 0.96), rgba(5,18,12, 0.98));
    border-inline: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--app-shadow);
}

body.thecentx-app header,
body.thecentx-app nav {
    width: min(100%, var(--app-shell-max)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

body.thecentx-app header {
    min-height: 70px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px !important;
    background: rgba(5,18,12, 0.78) !important;
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.24);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

body.thecentx-app header img {
    width: auto;
    max-width: 150px;
    height: 38px !important;
    object-fit: contain;
}

body.thecentx-app #ee-datetime {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: #DBF7EC !important;
    background: linear-gradient(135deg, rgba(45,239,159,0.18), rgba(4,110,62,0.14));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.thecentx-app main {
    gap: 18px !important;
    padding: 88px 16px 110px !important;
}

body.thecentx-app main > [id$="pageheader"],
body.thecentx-app main > .app-page-header {
    display: block;
}

body.thecentx-app main h1,
body.thecentx-app main h2,
body.thecentx-app main h3 {
    letter-spacing: -0.025em;
}

/* App cards and panels */
body.thecentx-app main section[class*="rounded"],
body.thecentx-app main div[class*="bg-surface"],
body.thecentx-app main .card,
body.thecentx-app main .terms-card,
body.thecentx-app main .invite,
body.thecentx-app main .content-body,
body.thecentx-app main .container-fluid,
body.thecentx-app main .neumorphic-loan-card,
body.thecentx-auth form > div[class*="rounded-2xl"] {
    background: linear-gradient(180deg, rgba(12,36,24, 0.86), rgba(9,28,18, 0.78)) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.thecentx-app main .card,
body.thecentx-app main .terms-card,
body.thecentx-app main .content-body,
body.thecentx-app main .container-fluid {
    border-radius: var(--app-radius) !important;
    padding: 16px !important;
}

body.thecentx-app main .card-header,
body.thecentx-app main .card-body {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.thecentx-app main .grid > div[class*="rounded"],
body.thecentx-app main .grid > a[class*="rounded"] {
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.thecentx-app main .grid > div[class*="rounded"]:active,
body.thecentx-app main .grid > a[class*="rounded"]:active,
.app-pressed {
    transform: scale(0.985);
}

/* Replace older hardcoded green accents with the new app blue palette */
.text-\[\#2DEF9F\],
.text-primary,
body.thecentx-app .green-text {
    color: var(--app-primary) !important;
}

.bg-primary,
body.thecentx-app .btn-primary,
body.thecentx-app .btn-success,
body.thecentx-app input[type="submit"],
body.thecentx-app input[type="button"] {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
    color: #fff !important;
}

.border-primary,
.ring-primary\/20,
.ring-primary\/30 {
    border-color: rgba(45,239,159, 0.45) !important;
    --tw-ring-color: rgba(45,239,159, 0.30) !important;
}

.bg-primary\/10,
.bg-primary\/20 {
    background-color: rgba(45,239,159, 0.14) !important;
}

/* Forms */
body.thecentx-app label,
body.thecentx-auth label,
body.thecentx-app .form-label {
    color: rgba(247,251,255,0.88) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.thecentx-app input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.thecentx-app select,
body.thecentx-app textarea,
body.thecentx-app .form-control,
body.thecentx-auth input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.thecentx-auth select,
body.thecentx-auth textarea,
body.thecentx-auth .form-control {
    width: 100%;
    min-height: 48px;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    background: rgba(255,255,255,0.065) !important;
    color: var(--app-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.thecentx-app input::placeholder,
body.thecentx-app textarea::placeholder,
body.thecentx-auth input::placeholder,
body.thecentx-auth textarea::placeholder {
    color: rgba(143,174,159, 0.82) !important;
}

body.thecentx-app input:focus,
body.thecentx-app select:focus,
body.thecentx-app textarea:focus,
body.thecentx-app .form-control:focus,
body.thecentx-auth input:focus,
body.thecentx-auth select:focus,
body.thecentx-auth textarea:focus,
body.thecentx-auth .form-control:focus {
    border-color: rgba(45,239,159, 0.64) !important;
    box-shadow: 0 0 0 4px rgba(45,239,159,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.095) !important;
}

body.thecentx-app select option,
body.thecentx-auth select option {
    color: #0A1F16;
}

/* Buttons */
body.thecentx-app main .btn,
body.thecentx-app main button,
body.thecentx-app main input[type="submit"],
body.thecentx-app main input[type="button"],
body.thecentx-auth button,
body.thecentx-auth input[type="submit"],
body.thecentx-auth input[type="button"] {
    min-height: 46px;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    box-shadow: 0 14px 28px rgba(45,239,159, 0.20) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

body.thecentx-app main .btn:hover,
body.thecentx-app main button:hover,
body.thecentx-app main input[type="submit"]:hover,
body.thecentx-app main input[type="button"]:hover,
body.thecentx-auth button:hover,
body.thecentx-auth input[type="submit"]:hover,
body.thecentx-auth input[type="button"]:hover {
    filter: brightness(1.06);
    box-shadow: 0 16px 34px rgba(45,239,159, 0.28) !important;
}

body.thecentx-app main .btn-default,
body.thecentx-app main .btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

/* Tables and GridViews */
body.thecentx-app .table-responsive,
body.thecentx-app .app-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 22px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--app-border);
    -webkit-overflow-scrolling: touch;
}

body.thecentx-app table,
body.thecentx-app .table,
body.thecentx-app .tw-grid {
    width: 100%;
    color: var(--app-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

body.thecentx-app table th,
body.thecentx-app .table th,
body.thecentx-app .tw-grid th {
    color: rgba(219,247,236, 0.80) !important;
    background: rgba(255,255,255,0.055) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 14px !important;
    white-space: nowrap;
}

body.thecentx-app table td,
body.thecentx-app .table td,
body.thecentx-app .tw-grid td {
    color: rgba(247,251,255,0.88) !important;
    background: rgba(255,255,255,0.028) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 13px 14px !important;
    vertical-align: middle !important;
}

body.thecentx-app table tr:hover td,
body.thecentx-app .table tr:hover td,
body.thecentx-app .tw-grid tr:hover td {
    background: rgba(45,239,159, 0.09) !important;
}

body.thecentx-app .marginauto {
    margin-inline: auto !important;
}

/* Bottom app navigation */
body.thecentx-app nav {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(5,18,12, 0.84) !important;
    border-top: 1px solid var(--app-border) !important;
    box-shadow: 0 -20px 42px rgba(0,0,0,0.32);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

body.thecentx-app nav > div {
    height: 66px !important;
    gap: 6px;
}

body.thecentx-app nav a {
    color: var(--app-muted) !important;
    border-radius: 18px;
    position: relative;
    isolation: isolate;
}

body.thecentx-app nav a:hover,
body.thecentx-app nav a.app-nav-active {
    color: #ffffff !important;
}

body.thecentx-app nav a.app-nav-active::before {
    content: "";
    position: absolute;
    inset: 8px 10px;
    z-index: -1;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(45,239,159,0.20), rgba(4,110,62,0.16));
    border: 1px solid rgba(255,255,255,0.10);
}

body.thecentx-app nav .relative.-top-5 a,
body.thecentx-app nav a[href*="arbitrage"] {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 14px 34px rgba(45,239,159,0.36) !important;
}

body.thecentx-app .material-symbols-outlined.filled,
body.thecentx-app nav a.app-nav-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 650, 'GRAD' 0, 'opsz' 24;
}

/* Auth screens */
body.thecentx-auth {
    min-height: 100svh;
}

body.thecentx-auth > div,
body.thecentx-auth form {
    position: relative;
}

body.thecentx-auth form {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
}

body.thecentx-auth form > div[class*="rounded-2xl"] {
    border-radius: 30px !important;
    padding: 22px !important;
}

body.thecentx-auth button#btnConnectWallet {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
}

body.thecentx-auth #Pmsg {
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    color: #DBF7EC !important;
}

/* Bootstrap utility fallbacks used by older pages */
body.thecentx-app .row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 !important;
}

body.thecentx-app [class*="col-"] {
    width: 100%;
    min-width: 0;
}

@media (min-width: 640px) {
    body.thecentx-app .col-md-6,
    body.thecentx-app .col-lg-6,
    body.thecentx-app .col-xs-6 {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    body.thecentx-app .col-md-12,
    body.thecentx-app .col-xs-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

body.thecentx-app .d-flex { display: flex !important; }
body.thecentx-app .flex-column { flex-direction: column !important; }
body.thecentx-app .justify-content-center { justify-content: center !important; }
body.thecentx-app .align-items-center { align-items: center !important; }
body.thecentx-app .text-center { text-align: center !important; }
body.thecentx-app .img-fluid { max-width: 100%; height: auto; }
body.thecentx-app .hidden { display: none !important; }
body.thecentx-app .h-100 { height: 100% !important; }
body.thecentx-app .flex-grow-1 { flex-grow: 1 !important; }
body.thecentx-app .my-5 { margin-block: 3rem !important; }
body.thecentx-app .py-5 { padding-block: 3rem !important; }
body.thecentx-app .pt-4 { padding-top: 1.5rem !important; }
body.thecentx-app .mx-3 { margin-inline: .75rem !important; }
body.thecentx-app .ms-2 { margin-left: .5rem !important; }
body.thecentx-app .mb-30 { margin-bottom: 30px !important; }
body.thecentx-app .pb-0 { padding-bottom: 0 !important; }

/* Status text */
body.thecentx-app [style*="color:red"],
body.thecentx-app .text-danger {
    color: var(--app-danger) !important;
}

body.thecentx-app .text-warning {
    color: var(--app-warning) !important;
}

/* Small screen polish */
@media (max-width: 430px) {
    :root { --app-shell-max: 100vw; }
    body.thecentx-app main { padding-inline: 14px !important; }
    body.thecentx-app header img { max-width: 128px; }
    body.thecentx-app #ee-datetime { font-size: 11px !important; padding-inline: 9px; }
    body.thecentx-app nav span.text-\[10px\] { font-size: 9px !important; }
}


/* =========================================================
   Dashboard Refresh
   ========================================================= */
.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.db-section-block,
.db-card,
.db-card-soft {
    position: relative;
}

.db-card,
.db-card-soft {
    background: linear-gradient(180deg, rgba(10,30,20, 0.96) 0%, rgba(6,22,14, 0.98) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.24);
    overflow: hidden;
}

.db-card::before,
.db-card-soft::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(45,239,159, 0.12), transparent 38%), radial-gradient(circle at bottom left, rgba(4,110,62, 0.16), transparent 36%);
    pointer-events: none;
}

.db-hero-card {
    background: linear-gradient(135deg, #0E2A1B 0%, #0C2418 45%, #0A2014 100%);
    border-color: rgba(120,210,170, 0.22);
}

.db-hero-top,
.db-section-head,
.db-card-top,
.db-inline-actions,
.db-action-row,
.db-name-row,
.db-profile-wrap,
.db-referral-box,
.db-hero-balance,
.db-metric-card,
.db-quick-card,
.db-referral-box-mini {
    position: relative;
    z-index: 1;
}

.db-hero-top,
.db-section-head,
.db-card-top,
.db-inline-actions,
.db-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.db-section-head {
    margin-bottom: 12px;
}

.db-section-head-tight {
    margin-bottom: 14px;
}

.db-profile-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.db-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.db-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    border: 2px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.db-avatar-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #2DEF9F, #2DEF9F);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

.db-eyebrow,
.db-section-kicker,
.db-mini-label,
.db-label,
.db-stat-label,
.db-subtle,
.db-stat-foot,
.db-metric-side span,
.db-quick-card small {
    color: var(--app-muted);
}

.db-eyebrow,
.db-section-kicker {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.db-title,
.db-section-title {
    margin: 0;
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
}

.db-title {
    font-size: 1.45rem;
}

.db-section-title {
    font-size: 1rem;
}

.db-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.db-rank-pill,
.db-status-pill,
.db-head-chip,
.db-icon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-radius: 999px;
    font-weight: 700;
}

.db-rank-pill {
    background: rgba(45,239,159, 0.12);
    color: #8FE6C8;
    border: 1px solid rgba(45,239,159, 0.18);
    padding: 5px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.db-status-pill,
.db-head-chip {
    padding: 8px 12px;
    background: rgba(255,255,255,0.07);
    color: #DBF7EC;
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
}

.db-status-pill .material-symbols-outlined,
.db-head-chip .material-symbols-outlined {
    font-size: 16px;
}

.db-subtle {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.db-hero-balance {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 14px;
    min-height: 96px;
}

.db-hero-chart-glow {
    width: 104px;
    height: 104px;
    border-radius: 30px;
    background: radial-gradient(circle at 30% 30%, rgba(45,239,159,0.95), rgba(45,239,159,0.55) 45%, rgba(4,110,62,0.15) 70%, transparent 76%);
    filter: blur(1px);
    opacity: 0.9;
}

.db-value {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.db-value-xl {
    font-size: 2.2rem;
}

.db-value-md {
    font-size: 1.2rem;
}

.db-mini-grid,
.db-wallet-grid,
.db-stats-grid,
.db-double-grid,
.db-biz-grid,
.db-quick-grid {
    display: grid;
    gap: 12px;
}

.db-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.db-mini-card,
.db-stat-card,
.db-biz-card {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 14px;
}

.db-mini-value {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: 5px;
}

.db-action-row {
    display: flex;
    gap: 10px;
}

.db-action-row-compact {
    margin-top: 14px;
}

.db-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-weight: 800;
    color: #fff !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    text-decoration: none !important;
}

.db-btn:hover,
.db-link-btn:hover,
.db-quick-card:hover,
.cg-card:hover,
.db-metric-card:hover {
    transform: translateY(-1px);
}

.db-btn-primary {
    background: linear-gradient(135deg, #2DEF9F 0%, #2DEF9F 100%);
    box-shadow: 0 14px 30px rgba(45,239,159,0.32);
}

.db-btn-secondary {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

.db-btn.is-success {
    background: linear-gradient(135deg, #2DEF9F, #046E3E);
}

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

.db-quick-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(10,30,20,0.96) 0%, rgba(8,24,15,0.94) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}

.db-quick-card .material-symbols-outlined {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(45,239,159,0.12);
    color: #9FE9CD;
}

.db-quick-card strong {
    font-size: 14px;
}

.db-ticker-grid,
.db-wallet-grid,
.db-stats-grid,
.db-double-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.db-wallet-card {
    padding: 16px;
}

.db-card-top {
    align-items: flex-start;
    margin-bottom: 14px;
}

.db-icon-chip {
    width: 42px;
    height: 42px;
    justify-content: center;
    background: rgba(45,239,159,0.12);
    border: 1px solid rgba(45,239,159,0.14);
    color: #8FE6C8;
}

.db-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.db-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(45,239,159,0.18);
    border: 1px solid rgba(45,239,159,0.22);
    color: #C8F1E0 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

.db-link-btn-muted {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.08);
    color: #DCF1E6 !important;
}

.db-referral-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.db-referral-box .material-symbols-outlined {
    color: #9FE9CD;
}

.db-referral-link {
    margin: 0;
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
}

.db-referral-box-mini {
    padding: 0;
    background: transparent;
    border: 0;
}

.db-stat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-stat-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(45,239,159,0.12);
    color: #8FE6C8;
}

.db-stat-label {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.db-stat-value {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.db-split-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.db-split-meta span,
.db-metric-side span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
}

.db-stat-foot {
    font-size: 12px;
    line-height: 1.5;
}

.db-card-soft {
    padding: 16px;
}

.db-metric-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-metric-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none !important;
}

.db-metric-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    font-size: 12px;
}

.db-biz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.db-biz-card {
    min-height: 96px;
}

/* Ticker cards */
.cg-card {
    display: block;
    padding: 15px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(10,30,20,0.96) 0%, rgba(8,24,15,0.94) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 35px rgba(0,0,0,0.18);
    text-decoration: none !important;
}

.cg-card__header,
.cg-card__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cg-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cg-card__label-wrap {
    min-width: 0;
}

.cg-card__label {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.cg-card__sub {
    margin: 2px 0 0;
    color: var(--app-muted);
    font-size: 11px;
}

.cg-icon {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
}

.cg-chg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.cg-price {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

.cg-card__price-row small {
    color: var(--app-muted);
    font-size: 11px;
}

.cg-card canvas {
    width: 100%;
    height: 52px;
    margin-top: 10px;
}

@media (min-width: 720px) {
    .db-wallet-grid,
    .db-stats-grid,
    .db-double-grid,
    .db-ticker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .db-wallet-grid,
    .db-stats-grid,
    .db-ticker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .db-double-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .db-card,
    .db-card-soft {
        padding: 16px;
        border-radius: 22px;
    }

    .db-hero-top,
    .db-section-head,
    .db-card-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .db-hero-balance {
        min-height: auto;
    }

    .db-mini-grid,
    .db-quick-grid,
    .db-biz-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .db-hero-chart-glow {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .db-title {
        font-size: 1.2rem;
    }

    .db-value-xl {
        font-size: 1.9rem;
    }
}


/* =========================================================
   Global Elegant Theme Refresh
   ========================================================= */
body.thecentx-app .app-main > * {
    position: relative;
}

body.thecentx-app .app-first-block:not(.dashboard-shell) {
    margin-top: 2px;
}

body.thecentx-app main > section,
body.thecentx-app main > div,
body.thecentx-app main > article {
    animation: appFadeUp .35s ease both;
}

@keyframes appFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

body.thecentx-app main > section > .mb-6:first-child h1,
body.thecentx-app main > section > .mb-6:first-child h2,
body.thecentx-app main > section > .mb-6:first-child h3,
body.thecentx-app main h4 {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}

body.thecentx-app main p,
body.thecentx-app main span,
body.thecentx-app main small,
body.thecentx-app main li {
    color: inherit;
}

body.thecentx-app main > div > h3,
body.thecentx-app main > section > h3,
body.thecentx-app main .text-lg.font-semibold,
body.thecentx-app main .text-2xl.font-bold,
body.thecentx-app main .text-white.text-lg.font-semibold {
    color: #fff !important;
}

body.thecentx-app .app-surface-card,
body.thecentx-app .profile-card,
body.thecentx-app .bet-card,
body.thecentx-app .form-box,
body.thecentx-app .stat-box,
body.thecentx-app .wallet-box,
body.thecentx-app .input-box,
body.thecentx-app .detail-card,
body.thecentx-app .history-card,
body.thecentx-app .support-box,
body.thecentx-app .feature-box,
body.thecentx-app .page-titles,
body.thecentx-app .mb-6 > .flex,
body.thecentx-app .flex.items-center.justify-between.p-3.rounded-xl,
body.thecentx-app .grid > .flex.flex-col.gap-3.rounded-2xl,
body.thecentx-app .grid > .rounded-2xl,
body.thecentx-app .flex.flex-col.gap-2.rounded-xl,
body.thecentx-app .flex.flex-col.gap-4.rounded-xl {
    background: linear-gradient(180deg, rgba(11,32,21,0.92), rgba(6,22,14,0.92)) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.25) !important;
    border-radius: 24px !important;
}

body.thecentx-app .form-group,
body.thecentx-app .app-form-group {
    margin-bottom: 14px;
}

body.thecentx-app .form-group label,
body.thecentx-app .input-box label,
body.thecentx-app label + .form-group,
body.thecentx-app label + .input-box {
    display: block;
}

body.thecentx-app .form-group > input,
body.thecentx-app .form-group > select,
body.thecentx-app .form-group > textarea,
body.thecentx-app .input-box > input,
body.thecentx-app .input-box > select,
body.thecentx-app .input-box > textarea {
    margin-top: 6px;
}

body.thecentx-app .repeater-item,
body.thecentx-app .list-item,
body.thecentx-app .transaction-item,
body.thecentx-app .income-card,
body.thecentx-app .team-card {
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
}

body.thecentx-app .app-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: #EAFBF3 !important;
    text-decoration: none !important;
    font-weight: 700;
    box-shadow: none !important;
}

body.thecentx-app .app-inline-action:hover {
    background: rgba(45,239,159,0.16);
    border-color: rgba(45,239,159,0.24);
}

body.thecentx-app .aspNetDisabled,
body.thecentx-app .disabled,
body.thecentx-app [disabled] {
    opacity: .7;
}

body.thecentx-app .text-neutral-500,
body.thecentx-app .text-gray-500,
body.thecentx-app .text-gray-400,
body.thecentx-app .text-white\/60,
body.thecentx-app .text-white\/50,
body.thecentx-app .text-text-muted {
    color: var(--app-muted) !important;
}

body.thecentx-app .text-amber-400,
body.thecentx-app .text-[#FFD137] {
    color: #FFD137 !important;
}

body.thecentx-app .bg-amber-500\/10,
body.thecentx-app .bg-[#011B1F],
body.thecentx-app .bg-white\/10,
body.thecentx-app .bg-black\/30 {
    background: rgba(45,239,159,0.12) !important;
}

body.thecentx-app .shadow-black\/20,
body.thecentx-app .shadow-lg {
    box-shadow: 0 16px 38px rgba(0,0,0,0.22) !important;
}

body.thecentx-app .rounded-4,
body.thecentx-app .rounded-3,
body.thecentx-app .rounded-2,
body.thecentx-app .rounded-1 {
    border-radius: 22px !important;
}

body.thecentx-app hr,
body.thecentx-app .h-px {
    border-color: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
}

body.thecentx-app .page-titles {
    padding: 14px 16px !important;
    margin-top: 0 !important;
}

body.thecentx-app .page-titles h1,
body.thecentx-app .page-titles h2,
body.thecentx-app .page-titles h3 {
    margin: 0;
    font-size: 1.15rem;
}

body.thecentx-app .page-titles p {
    margin: 4px 0 0;
    color: var(--app-muted) !important;
}

body.thecentx-app main .grid.grid-cols-2 > div,
body.thecentx-app main .grid.grid-cols-1 > div,
body.thecentx-app main .grid.grid-cols-2 > a,
body.thecentx-app main .grid.grid-cols-1 > a {
    min-width: 0;
}

body.thecentx-app .card img,
body.thecentx-app .rounded-2xl img,
body.thecentx-app .rounded-xl img {
    border-radius: inherit;
}

body.thecentx-app .status-chip,
body.thecentx-app .badge,
body.thecentx-app .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(45,239,159,0.12);
    border: 1px solid rgba(45,239,159,0.18);
    color: #CFF1E2 !important;
    font-size: 11px;
    font-weight: 700;
}

body.thecentx-auth .app-auth-shell {
    max-width: 100%;
}

body.thecentx-auth .app-auth-hero {
    margin-bottom: 18px !important;
}

body.thecentx-auth .app-auth-card {
    border-radius: 32px !important;
    padding: 24px !important;
}

body.thecentx-auth .app-auth-title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #fff;
}

body.thecentx-auth .app-auth-subtitle {
    margin: 10px auto 0;
    max-width: 28rem;
    color: #C9EAD9;
    font-size: 14px;
    line-height: 1.65;
}

body.thecentx-auth .app-auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(45,239,159,0.16), transparent 34%), radial-gradient(circle at bottom left, rgba(4,110,62,0.16), transparent 34%);
}

body.thecentx-auth .app-auth-card > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    body.thecentx-app .app-inline-action {
        width: 100%;
    }

    body.thecentx-app .row {
        gap: 10px;
    }

    body.thecentx-app .page-titles {
        padding-inline: 14px !important;
    }
}