@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

body {
    font-family: "Barlow";
}

.display-none {
    display: none;
}

.error {
    color: #ef4d56;
}
.text-usdt {
    color: #27a17b;
}

.wallet-header {
    font-size: 2.5rem;
}

.wallet-header-currency {
    font-size: 1.5rem;
    font-weight: bold;
}

.plan_none {

}

.plan_a {
    background: #f5f5f5;
    color: #000;
}

.plan_b {
    background: #1e90ff;
    color: #fff;
}

.plan_c {
    background: #008080;
    color: #fff;
}

.plan_d {
    background: #fa8072;
    color: #fff;
}

.plan_e {
    background: linear-gradient(45deg, #7F462C 0%, #B87333 45%, #D9A066 70%, #B87333 85%, #7F462C 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(184, 115, 51, 0.6);
    color: #000000;
}

.plan_f {
    background: linear-gradient(45deg, #A8A8A8 0%, #C0C0C0 45%, #E0E0E0 70%, #C0C0C0 85%, #A8A8A8 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.6);
    color: #000000;
}

.plan_g {
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(255, 223, 0, 0.6);
    color: #000000;
}

.plan_white {
    background: #f5f5f5;
    color: #000;
}

.plan_blue {
    background: #1e90ff;
    color: #fff;
}

.plan_yellow {
    background: #f1c40f;
    color: #000;
}

.plan_green {
    background: #28a745;
    color: #fff;
}

.plan_purple {
    background: #8e44ad;
    color: #fff;
}

.plan_red {
    background: #e74c3c;
    color: #fff;
}

.plan_gold {
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(255, 223, 0, 0.6);
    color: #000000;
}

.plan_rainbow {
    background: linear-gradient(45deg, #ff2d55, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff2d55);
    background-size: 300% 300%;
    animation: highRankAnimation 3s infinite;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
@keyframes highRankAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

select.goog-te-combo {
    width: 150px;
}

.chat-box-left .chat-body-left {
    height: 640px !important;
}
.chat-box-right .chat-body {
    height: 520px !important;
}

/* Underline for text-type anchor tags across all screens.
   Button-like / navigation anchors opt out via selectors below. */
a {
    text-decoration: underline;
}

a.btn,
a.nav-link,
a.dropdown-item,
a.page-link,
a.list-group-item,
a.breadcrumb-item,
a.navbar-brand,
a.card-link,
a.text-decoration-none,
.pagination a,
.sidebar a,
.startbar a,
.topbar a,
.nav a,
.navbar a,
.breadcrumb a,
.dropdown-menu a,
.list-group a,
.pagination a,
.datatable-pagination a,
.simple-pagination a,
.tab-content a.nav-link,
.nav-tabs a,
.nav-pills a,
.chat-body a,
.chat-body-left a,
.chat-detail a,
.chat-features a,
.chat-footer a,
.user-item,
.user-item a {
    text-decoration: none;
}

/* New-tab indicator for external links opening in a new tab.
   Skip when an icon is already present, or for button/nav anchors. */
a[target="_blank"]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.no-external-icon)::after {
    content: "\f08e"; /* font-awesome external-link */
    font-family: "Font Awesome 5 Free", "FontAwesome", "Line Awesome Free";
    font-weight: 900;
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.85em;
    vertical-align: baseline;
}

a[target="_blank"]:has(> i)::after,
a[target="_blank"]:has(> svg)::after,
a[target="_blank"]:has(> img)::after {
    content: none;
}

/* ===================== Brand buttons ===================== */
/* Primary buttons use the RUPLINK logo green (#48a317) instead of the template's bright green */
.btn-primary {
    --bs-btn-bg: #48a317;
    --bs-btn-border-color: #48a317;
    --bs-btn-hover-bg: #3f8f14;
    --bs-btn-hover-border-color: #3a8412;
    --bs-btn-active-bg: #3a8412;
    --bs-btn-active-border-color: #347610;
    --bs-btn-disabled-bg: #48a317;
    --bs-btn-disabled-border-color: #48a317;
}
.btn-outline-primary {
    --bs-btn-color: #4fb31a;
    --bs-btn-border-color: #48a317;
    --bs-btn-hover-bg: #48a317;
    --bs-btn-hover-border-color: #48a317;
    --bs-btn-active-bg: #48a317;
    --bs-btn-active-border-color: #48a317;
    --bs-btn-disabled-color: #4fb31a;
    --bs-btn-disabled-border-color: #48a317;
}

/* ===================== Liquid Glass buttons (mypage / auth) ===================== */
/* pill shape + glassy treatment so buttons match the Liquid Glass panels (not the template look) */
body.glass-ui .btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, background 0.2s ease;
}
/* primary CTA — brand green, glossy pill with a soft glow */
body.glass-ui .btn-primary {
    background: linear-gradient(180deg, #57bd22 0%, #48a317 58%, #3f8f14 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(72, 163, 23, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
body.glass-ui .btn-primary:hover,
body.glass-ui .btn-primary:focus {
    background: linear-gradient(180deg, #5cc426 0%, #4cab19 58%, #439615 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(72, 163, 23, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
body.glass-ui .btn-primary:active { transform: translateY(0); }
/* outline / secondary — frosted glass chips */
body.glass-ui .btn-outline-primary,
body.glass-ui .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body.glass-ui .btn-outline-primary { color: #c3f0a2 !important; }
body.glass-ui .btn-secondary { color: #e8eef5 !important; }
body.glass-ui .btn-outline-primary:hover,
body.glass-ui .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ===================== Apple "Liquid Glass" (all mypage / auth) ===================== */
/* Vivid, slowly flowing colour field behind the glass so the panels have something rich to
   refract. Deep base keeps light text legible; the blobs are saturated and brand-tinted. */
body.glass-ui {
    background: radial-gradient(125% 125% at 50% 0%, #0b1a22 0%, #07121a 52%, #04090e 100%) !important;
    background-attachment: fixed !important;
}
/* Layer A — blobs drift AND breathe (fade in/out) */
body.glass-ui::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(40% 46% at 18% 20%, rgba(18, 156, 134, 0.62), transparent 64%),   /* emerald-teal */
        radial-gradient(36% 42% at 84% 14%, rgba(32, 124, 214, 0.55), transparent 64%),    /* azure */
        radial-gradient(44% 50% at 76% 84%, rgba(226, 150, 42, 0.42), transparent 66%),     /* brand gold */
        radial-gradient(38% 44% at 10% 86%, rgba(42, 184, 122, 0.46), transparent 66%),     /* green */
        radial-gradient(30% 34% at 52% 54%, rgba(96, 210, 200, 0.22), transparent 70%);     /* soft centre glow */
    filter: blur(72px) saturate(140%);
    animation: liquidFlow 26s ease-in-out infinite alternate, breatheA 13s ease-in-out infinite;
}
/* Layer B — a second set of blobs, different positions/timing, fading OPPOSITE to A so the
   overall colour field keeps changing (colours appear and disappear) */
body.glass-ui::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 48% at 68% 26%, rgba(24, 170, 150, 0.50), transparent 64%),
        radial-gradient(38% 44% at 22% 66%, rgba(40, 130, 220, 0.46), transparent 64%),
        radial-gradient(40% 46% at 88% 62%, rgba(60, 196, 140, 0.42), transparent 66%),
        radial-gradient(34% 40% at 40% 12%, rgba(230, 162, 56, 0.36), transparent 66%);
    filter: blur(78px) saturate(140%);
    animation: liquidFlow2 34s ease-in-out infinite alternate, breatheB 17s ease-in-out infinite;
}
@keyframes liquidFlow {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(3%, -3.5%, 0) scale(1.18) rotate(5deg); }
    100% { transform: translate3d(-3.5%, 3%, 0) scale(1.09) rotate(-4deg); }
}
@keyframes liquidFlow2 {
    0%   { transform: translate3d(0, 0, 0) scale(1.08) rotate(0deg); }
    50%  { transform: translate3d(-3.5%, 3%, 0) scale(1) rotate(-5deg); }
    100% { transform: translate3d(3%, -2.5%, 0) scale(1.16) rotate(4deg); }
}
@keyframes breatheA { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes breatheB { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.glass-ui::before, body.glass-ui::after { animation: none; }
}
/* let the body glass show through the wrappers */
body.glass-ui .page-wrapper,
body.glass-ui .page-content { background: transparent !important; min-height: 100vh; }
/* breathing room below the fixed header so the first card isn't glued to it */
body.glass-ui .page-content > .container-xxl { padding-top: 24px; }

/* Sidebar & Topbar — Liquid Glass bars (applies to all mypage pages) */
body.glass-ui .startbar,
body.glass-ui .topbar {
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}
body.glass-ui .topbar {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.30);
}
/* sidebar: kept fairly solid (more opaque dark glass), with a soft inner edge highlight */
body.glass-ui .startbar {
    background: rgba(11, 20, 28, 0.60) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
body.glass-ui .startbar { border-right: 1px solid rgba(255, 255, 255, 0.12); }
body.glass-ui .topbar { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
body.glass-ui .startbar .brand,
body.glass-ui .startbar-menu,
body.glass-ui .startbar-collapse { background: transparent !important; }
/* keep the header a single glass layer when scrolled (topbar-custom gets .nav-sticky with a solid bg) */
body.glass-ui .topbar-custom,
body.glass-ui .topbar-custom.nav-sticky {
    background-color: transparent !important;
    box-shadow: none !important;
}
/* glass footer (its inner .card is already glassed) */
body.glass-ui .footer { background-color: transparent !important; }

/* Cards — Apple "Liquid Glass": clear refractive material, bright specular rim, top gloss, float */
body.glass-ui .card {
    position: relative;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.06) 100%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%) brightness(1.03);
    backdrop-filter: blur(22px) saturate(155%) brightness(1.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 26px;
    box-shadow:
        inset 0 1px 0.5px rgba(255, 255, 255, 0.16),     /* faint top light  ┐ slight emboss, */
        inset 0 -1px 1px rgba(0, 0, 0, 0.09);            /* faint bottom dark ┘ no drop shadow */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* very faint diagonal sheen (no embossed rim) */
body.glass-ui .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0%, transparent 34%);
    z-index: 0;
}
/* lift the normal card content above the gloss, but DON'T touch .balance-fx (it must stay absolute) */
body.glass-ui .card > .card-header,
body.glass-ui .card > .card-body,
body.glass-ui .card > .card-footer { position: relative; z-index: 1; }
body.glass-ui .card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0.5px rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px rgba(0, 0, 0, 0.10);
}
body.glass-ui .card-header {
    background: transparent !important;
    border-bottom: 0 !important;
}
body.glass-ui .card-title,
body.glass-ui h1, body.glass-ui h4,
body.glass-ui h5, body.glass-ui h6 { color: #eef2f6; }
body.glass-ui .text-muted { color: rgba(226, 232, 240, 0.66) !important; }
body.glass-ui a.text-decoration-underline { color: #cfe8bd; }
/* tables on glass */
body.glass-ui .table { color: #e2e8f0; --bs-table-bg: transparent; }
body.glass-ui .table > :not(caption) > * > * { background-color: transparent; }
/* header cells = frosted glass strip. NOTE: simple-datatables strips the .table-light class
   when it transforms the table, so target header th broadly (plain .table + .datatable-table). */
/* the template forces an opaque thead bg: .datatable-table>thead{background:var(--bs-light)!important}.
   Override the thead ELEMENT to transparent so only the th's frosted tint shows. */
body.glass-ui .table thead,
body.glass-ui .datatable-table thead,
body.glass-ui .datatable-table > thead {
    background-color: transparent !important;
}
body.glass-ui .table thead th,
body.glass-ui .datatable-table thead th,
body.glass-ui .datatable-table > thead > tr > th {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(226, 232, 240, 0.86) !important;
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
    font-weight: 600;
}
/* the sort control is a native <button> whose default grey background hid the glass header */
body.glass-ui .datatable-table thead th .datatable-sorter,
body.glass-ui .datatable-table thead th button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, 0.86) !important;
}
body.glass-ui .table td,
body.glass-ui .table th { border-color: rgba(255, 255, 255, 0.08); }
/* the datatable container draws a dark var(--bs-border-color) bottom line — soften it to glass */
body.glass-ui .datatable-wrapper.no-footer .datatable-container,
body.glass-ui .datatable-container { border-bottom-color: rgba(255, 255, 255, 0.10) !important; }
/* inputs on glass (referral URL) */
body.glass-ui .form-control {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}
body.glass-ui .form-control::placeholder { color: rgba(226, 232, 240, 0.5); }
/* datatable search box + "entries per page" selector — match the glass form-control look
   (they use .datatable-input / .datatable-selector, not .form-control) */
body.glass-ui .datatable-input,
body.glass-ui .datatable-selector {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
    border-radius: 6px;
}
body.glass-ui .datatable-input::placeholder { color: rgba(226, 232, 240, 0.5); }
body.glass-ui .datatable-input:focus,
body.glass-ui .datatable-selector:focus { border-color: rgba(79, 179, 26, 0.85) !important; }
body.glass-ui .datatable-selector option { color: #16211a; }
/* pagination page numbers (datatable + bootstrap) — Liquid Glass */
body.glass-ui .datatable-info { color: rgba(226, 232, 240, 0.70) !important; }
body.glass-ui .datatable-pagination-list-item-link,
body.glass-ui .page-link {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: #e5ecf2 !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}
body.glass-ui .datatable-pagination-list-item-link:hover,
body.glass-ui .page-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
/* current page = brand green pill */
body.glass-ui .datatable-active .datatable-pagination-list-item-link,
body.glass-ui .datatable-active a,
body.glass-ui .datatable-active button,
body.glass-ui .page-item.active .page-link {
    background: linear-gradient(180deg, #57bd22, #48a317) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(72, 163, 23, 0.28);
}
body.glass-ui .datatable-disabled .datatable-pagination-list-item-link,
body.glass-ui .page-item.disabled .page-link { opacity: 0.45; }
/* Alerts / notices — Liquid Glass: frosted panel, soft severity tint, colored left accent */
body.glass-ui .alert {
    background: rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-left-width: 3px !important;
    border-radius: 16px !important;
    color: #e9f0ec !important;
}
body.glass-ui .alert h4,
body.glass-ui .alert h5,
body.glass-ui .alert p { color: #eef2f6; }
body.glass-ui .alert a { color: #cfe8bd; font-weight: 600; }
body.glass-ui .alert-warning { background: rgba(230, 150, 42, 0.13) !important; border-left-color: #e6962a !important; }
body.glass-ui .alert-info    { background: rgba(46, 150, 220, 0.13) !important; border-left-color: #47a0d6 !important; }
body.glass-ui .alert-danger  { background: rgba(230, 76, 76, 0.14) !important;  border-left-color: #e75c5c !important; }
body.glass-ui .alert-success { background: rgba(72, 163, 23, 0.14) !important;  border-left-color: #57bd22 !important; }
body.glass-ui .alert-primary { background: rgba(72, 163, 23, 0.13) !important;  border-left-color: #57bd22 !important; }

/* Post-action toast (SweetAlert2) — Liquid Glass dark chip */
body.glass-ui .swal2-container .swal2-toast {
    background: rgba(18, 28, 38, 0.58) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42) !important;
    color: #eef2f6 !important;
}
body.glass-ui .swal2-toast .swal2-title { color: #eef2f6 !important; }
body.glass-ui .swal2-toast .swal2-html-container { color: rgba(226, 232, 240, 0.85) !important; }
body.glass-ui .swal2-toast .swal2-timer-progress-bar { background: rgba(255, 255, 255, 0.32) !important; }
body.glass-ui .swal2-toast .swal2-close { color: #cfd8e3 !important; }

/* Account mini-menu (topbar profile dropdown) — Liquid Glass */
body.glass-ui .dropdown-menu {
    background: rgba(18, 28, 38, 0.78) !important;
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
}
body.glass-ui .dropdown-item { color: #e5ecf2 !important; }
body.glass-ui .dropdown-item:hover,
body.glass-ui .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}
body.glass-ui .dropdown-item.text-danger { color: #ff8f8f !important; }
body.glass-ui .dropdown-item.text-danger:hover,
body.glass-ui .dropdown-item.text-danger:focus {
    background-color: rgba(231, 92, 92, 0.18) !important;
    color: #ffb3b3 !important;
}
body.glass-ui .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.10) !important; opacity: 1; }
body.glass-ui .dropdown-menu .bg-secondary-subtle { background-color: rgba(255, 255, 255, 0.07) !important; }
body.glass-ui .dropdown-menu .text-dark { color: #eef2f6 !important; }

/* ===================== Tree nodes — Liquid Glass ===================== */
/* connector lines: subtle light on the dark glass */
body.glass-ui .tree li:before { border-top-color: rgba(255, 255, 255, 0.20) !important; }
body.glass-ui .tree ul:before,
body.glass-ui .tree span.box:before { border-left-color: rgba(255, 255, 255, 0.20) !important; }
/* each node = a dark-glass panel; the plan colour moves to the badge below */
body.glass-ui .tree span.box {
    background: rgba(12, 22, 32, 0.50) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px;
    color: #eaf1ec;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
    animation: none !important;
    text-shadow: none;
    width: 104px;
    padding: 0.6em 0.5em;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.glass-ui .tree span.box:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.30) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
}
body.glass-ui .tree span.box span,
body.glass-ui .tree span.box .member_count { color: #eaf1ec; }
/* current user's node — green glass highlight */
body.glass-ui .tree span.box.active_position {
    background: rgba(72, 163, 23, 0.20) !important;
    border-color: rgba(87, 189, 34, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(87, 189, 34, 0.35), 0 8px 22px rgba(72, 163, 23, 0.28);
}
/* plan pill — carries the plan colour so the plan is instantly readable */
body.glass-ui .box .position_name_badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 2px 11px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
body.glass-ui .box.plan_a .position_name_badge,
body.glass-ui .box.plan_white .position_name_badge { background: #eef1f5 !important; color: #16202b !important; }
body.glass-ui .box.plan_b .position_name_badge,
body.glass-ui .box.plan_blue .position_name_badge { background: #1e90ff !important; color: #fff !important; }
body.glass-ui .box.plan_c .position_name_badge { background: #009e93 !important; color: #fff !important; }
body.glass-ui .box.plan_d .position_name_badge,
body.glass-ui .box.plan_red .position_name_badge { background: #e74c3c !important; color: #fff !important; }
body.glass-ui .box.plan_green .position_name_badge { background: #2fb750 !important; color: #06210f !important; }
body.glass-ui .box.plan_yellow .position_name_badge { background: #f1c40f !important; color: #2a2410 !important; }
body.glass-ui .box.plan_purple .position_name_badge { background: #9b59d0 !important; color: #fff !important; }
body.glass-ui .box.plan_e .position_name_badge { background-image: linear-gradient(45deg, #7F462C, #B87333, #D9A066, #B87333, #7F462C) !important; background-size: 300% 300% !important; animation: highRankAnimation 3s infinite; color: #211105 !important; }
body.glass-ui .box.plan_f .position_name_badge { background-image: linear-gradient(45deg, #A8A8A8, #C0C0C0, #E0E0E0, #C0C0C0, #A8A8A8) !important; background-size: 300% 300% !important; animation: highRankAnimation 3s infinite; color: #20242a !important; }
body.glass-ui .box.plan_g .position_name_badge,
body.glass-ui .box.plan_gold .position_name_badge { background-image: linear-gradient(45deg, #B67B03, #DAAF08, #FEE9A0, #DAAF08, #B67B03) !important; background-size: 300% 300% !important; animation: highRankAnimation 3s infinite; color: #241a02 !important; }
body.glass-ui .box.plan_rainbow .position_name_badge { background-image: linear-gradient(45deg, #ff2d55, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff2d55) !important; background-size: 300% 300% !important; animation: highRankAnimation 3s infinite; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

/* Chat: the input bar was position:absolute, so it overlaid the bottom of the message area
   and the last message could sit under it. Put it in normal flow (below the messages) so the
   two areas can never overlap — no height math needed. */
.chat-box-right .chat-footer { position: relative; }

/* Chat page: the chat panel/header/footer/bubbles use their own classes (not .card),
   so glass them explicitly. */
body.glass-ui .chat-box-right {
    background-color: rgba(255, 255, 255, 0.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    backdrop-filter: blur(18px) saturate(112%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.13);
    overflow: hidden;
}
/* header strip */
body.glass-ui .chat-box-right .card-bg {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.glass-ui .chat-box-right .card-bg h6,
body.glass-ui .chat-box-right .card-bg .text-dark { color: #eef2f6 !important; }
/* footer input bar */
body.glass-ui .chat-box-right .chat-footer {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
}
/* the chat textarea carries .border-white (solid white border) — align it with the other glass inputs */
body.glass-ui .chat-box-right .chat-footer .form-control {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
    border-radius: 6px;
}
body.glass-ui .chat-box-right .chat-footer .form-control::placeholder { color: rgba(226, 232, 240, 0.5); }
/* incoming (support) bubble → frosted glass; outgoing (user) bubble → brand green */
body.glass-ui .chat-box-right .chat-body .chat-detail .chat-box .user-chat p {
    background-color: rgba(255, 255, 255, 0.11) !important;
    color: #eef2f6 !important;
}
body.glass-ui .chat-box-right .chat-body .chat-detail .chat-box.reverse .user-chat p {
    background-color: #48a317 !important;
    color: #fff !important;
}

/* Dashboard Balance card: Spin + Gold Ring — a coin continuously spins (showing $ ⇄ ₹)
   inside a slowly rotating gold ring. NOTE: no filter/backdrop-filter on .balance-fx, or the
   coin's 3D would be flattened. */
.balance-card { position: relative; }
.balance-card .card-body { position: relative; z-index: 1; }
/* .balance-fx = layout + perspective only; the glass disc itself is on ::before */
.balance-fx {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: 116px;
    height: 116px;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    perspective: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The frosted glass lives on a pseudo element, NOT on .balance-fx itself: a
   backdrop-filter on the element that carries `perspective` flattens the coin's
   3D under Windows/ANGLE compositing. Keeping it on ::before preserves the look
   while leaving the 3D context clean. */
.balance-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.18), inset 0 -8px 16px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(3px) saturate(140%);
    backdrop-filter: blur(3px) saturate(140%);
}
/* the slowly rotating gold ring */
.fx-ring2 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(217, 184, 119, 0.78) 80deg, transparent 190deg, rgba(217, 184, 119, 0.38) 285deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: fxRingSpin 3.4s linear infinite;
}
/* the continuously spinning coin ($ front / ₹ back) */
.fx-coin {
    position: absolute;
    inset: 15px;
    transform-style: preserve-3d;
    animation: fxCoinSpin 4s linear infinite;
}
.fx-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Barlow", "Segoe UI", "Noto Sans", Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: #ecd39a;
    text-shadow: 0 1px 10px rgba(246, 230, 189, 0.30);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.fx-back { transform: rotateY(180deg); }
@keyframes fxRingSpin { to { transform: rotate(360deg); } }
@keyframes fxCoinSpin { to { transform: rotateY(360deg); } }
/* Deliberately keep the coin spinning even when the OS asks for reduced motion.
   The animation is decorative, loops slowly and never moves the layout, so it is
   restated here to override any reduced-motion rule from other stylesheets. */
@media (prefers-reduced-motion: reduce) {
    .fx-ring2 { animation: fxRingSpin 3.4s linear infinite; }
    .fx-coin { animation: fxCoinSpin 4s linear infinite; }
    .fx-back { opacity: 1; }
}

/* mypage sidebar brand logo: collapsed -> brand_logo, expanded -> logo-sm, mobile(off-canvas) -> logo-sm */
.brand .brand-logo-collapsed { display: none; }
.brand .brand-logo-expanded { display: inline-block; }
body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand .brand-logo-expanded { display: none; }
body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand .brand-logo-collapsed { display: inline-block; }
@media (max-width: 1199.98px) {
    .brand .brand-logo-collapsed,
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand .brand-logo-collapsed { display: none; }
    .brand .brand-logo-expanded,
    body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand .brand-logo-expanded { display: inline-block; }
}