/* =====================================================================================
   RevelX theme — "Nebula"
   Night-sky indigo backgrounds with the PowerPoolX (PPX) purple → blue gradient.
   Loaded after the Front dashboard theme (theme-dark.min.css) and restyles every
   Bootstrap / Front component used by the user panel, so all pages share one look.
   ===================================================================================== */

@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url('../fonts/revelx/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('../fonts/revelx/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url('../fonts/revelx/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('../fonts/revelx/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/revelx/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/revelx/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/revelx/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/revelx/inter-latin-700-normal.woff2') format('woff2'); }

:root {
    --rx-bg: #060e1a;
    --rx-bg-2: #09172b;
    --rx-surface: rgba(17, 34, 59, .72);
    --rx-surface-solid: #102038;
    --rx-surface-2: rgba(31, 56, 94, .55);
    --rx-surface-3: #172e51;
    --rx-border: rgba(136, 205, 255, .14);
    --rx-border-strong: rgba(136, 205, 255, .28);
    --rx-text: #ecf7ff;
    --rx-muted: #a5c2d7;
    --rx-faint: #6d8a9f;
    --rx-purple: #5a92ba;
    --rx-violet: #61aadf;
    --rx-blue: #2969d7;
    --rx-cyan: #54d4ff;
    --rx-grad: linear-gradient(120deg, #5a92ba 0%, #68a8d6 48%, #2969d7 100%);
    --rx-grad-soft: linear-gradient(120deg, rgba(90, 146, 186, .22) 0%, rgba(41, 105, 215, .18) 100%);
    --rx-success: #2fd39a;
    --rx-danger: #ff5f8f;
    --rx-warning: #ffbd4a;
    --rx-info: #54d4ff;
    --rx-radius: 18px;
    --rx-radius-sm: 12px;
    --rx-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -22px rgba(0, 0, 0, .8);
    --rx-glow: 0 10px 30px -10px rgba(104, 168, 214, .65);
    --rx-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rx-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* Bootstrap 5 variables */
    --bs-body-bg: var(--rx-bg);
    --bs-body-color: var(--rx-text);
    --bs-body-font-family: var(--rx-font);
    --bs-primary: #61aadf;
    --bs-primary-rgb: 123, 100, 220;
    --bs-secondary-rgb: 169, 166, 214;
    --bs-success-rgb: 47, 211, 154;
    --bs-danger-rgb: 255, 95, 143;
    --bs-warning-rgb: 255, 189, 74;
    --bs-info-rgb: 84, 183, 255;
    --bs-border-color: var(--rx-border);
    --bs-link-color: #a8dbff;
    --bs-link-hover-color: #ffffff;
    color-scheme: dark;
}

/* ---------- page canvas: night sky ---------- */
html { background: var(--rx-bg); }
body {
    font-family: var(--rx-font) !important;
    color: var(--rx-text) !important;
    background-color: var(--rx-bg) !important;
    background-image:
        radial-gradient(1200px 700px at 12% -10%, rgba(90, 146, 186, .28), transparent 60%),
        radial-gradient(1000px 650px at 100% 0%, rgba(41, 105, 215, .22), transparent 60%),
        radial-gradient(900px 500px at 50% 115%, rgba(67, 109, 172, .28), transparent 65%),
        linear-gradient(180deg, #060e1a 0%, #091629 45%, #0e1f39 100%) !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
}
body::before { /* stars */
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent 50%),
        radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.8), transparent 50%),
        radial-gradient(1.5px 1.5px at 200px 160px, rgba(180, 224, 255, .9), transparent 50%),
        radial-gradient(1px 1px at 280px 40px, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1px 1px at 330px 210px, rgba(160, 231, 255, .8), transparent 50%),
        radial-gradient(1.5px 1.5px at 60px 250px, rgba(255,255,255,.6), transparent 50%);
    background-size: 360px 280px;
}
::selection { background: rgba(97, 170, 223, .45); color: #fff; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-header-title, .card-header-title, .display-1, .display-2, .display-3, .display-4, .display-5 {
    font-family: var(--rx-font-display) !important; color: var(--rx-text); letter-spacing: -.01em;
}
a { color: #a8dbff; }
a:hover { color: #fff; }
.text-body, .text-dark, .text-black { color: var(--rx-text) !important; }
.text-muted, .text-secondary, .card-text.text-body, small.text-muted, .form-text { color: var(--rx-muted) !important; }
.text-primary, .link-primary { color: #96d3ff !important; }
.text-success { color: var(--rx-success) !important; }
.text-danger { color: var(--rx-danger) !important; }
.text-warning { color: var(--rx-warning) !important; }
.text-info { color: var(--rx-info) !important; }
hr, .dropdown-divider { border-color: var(--rx-border) !important; opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--rx-border) !important; }
.bg-white, .bg-light, .bg-soft-light, .bg-body { background-color: transparent !important; }
.bg-dark { background-color: var(--rx-surface-solid) !important; }
.bg-primary { background: var(--rx-grad) !important; }
.bg-soft-primary { background-color: rgba(97, 170, 223, .16) !important; }
.bg-soft-success { background-color: rgba(47, 211, 154, .14) !important; }
.bg-soft-danger { background-color: rgba(255, 95, 143, .14) !important; }
.bg-soft-warning { background-color: rgba(255, 189, 74, .14) !important; }
.bg-soft-info { background-color: rgba(84, 212, 255, .14) !important; }
.bg-success { background-color: var(--rx-success) !important; }
.bg-danger { background-color: var(--rx-danger) !important; }
.bg-warning { background-color: var(--rx-warning) !important; }
.bg-info { background-color: var(--rx-info) !important; }
.rx-grad-text { background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ---------- layout: main area ---------- */
.main { background: transparent !important; }
.content.container-fluid { padding-top: 1.5rem !important; }
@media (min-width: 1200px) { .content.container-fluid { padding-left: 2rem !important; padding-right: 2rem !important; } }
.page-header { border: 0 !important; margin-bottom: 1.25rem !important; }
.page-header-title { font-size: 1.75rem; font-weight: 700; }
.breadcrumb { margin-bottom: .35rem !important; }
.breadcrumb-link, .breadcrumb-item, .breadcrumb-item + .breadcrumb-item::before { color: var(--rx-faint) !important; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.breadcrumb-item.active { color: #a8dbff !important; }

/* ---------- header (top bar) ---------- */
#header.navbar {
    background: rgba(7, 17, 31, .72) !important;
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--rx-border) !important; box-shadow: none !important;
}
#header .navbar-nav-wrap { min-height: 4.25rem; }
.navbar-aside-toggler, .btn-ghost-secondary { color: var(--rx-muted) !important; }
.navbar-aside-toggler:hover, .btn-ghost-secondary:hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }

/* ---------- sidebar ---------- */
.navbar-vertical-aside {
    background: linear-gradient(180deg, rgba(10, 23, 43, .96), rgba(7, 17, 31, .98)) !important;
    border-right: 1px solid var(--rx-border) !important;
}
.navbar-vertical-aside .navbar-brand { padding-top: 1.25rem !important; padding-bottom: 1rem !important; }
.navbar-vertical .nav-link, .navbar-vertical-aside .nav-link {
    color: var(--rx-muted) !important; border-radius: 12px !important; margin: 2px 0; font-weight: 500;
    transition: background-color .15s, color .15s;
}
.navbar-vertical .nav-link .nav-icon { color: inherit !important; opacity: .85; }
.navbar-vertical .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
.navbar-vertical .nav-link.active, .navbar-vertical .nav-link[aria-expanded="true"] {
    color: #fff !important; background: var(--rx-grad-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(136, 205, 255, .22);
}
.navbar-vertical .nav-link.active .nav-icon { color: #b9e2ff !important; opacity: 1; }
.navbar-vertical .nav-collapse .nav-link { font-size: .85rem; }
.navbar-vertical .dropdown-header, .navbar-vertical .nav-subtitle {
    color: var(--rx-faint) !important; font-size: .68rem !important; letter-spacing: .16em; font-weight: 700; text-transform: uppercase;
}
.navbar-vertical-footer { border-top: 1px solid var(--rx-border) !important; background: transparent !important; }
.navbar-vertical-content::-webkit-scrollbar { width: 6px; }
.navbar-vertical-content::-webkit-scrollbar-thumb { background: rgba(136, 205, 255, .25); border-radius: 6px; }

/* ---------- cards ---------- */
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group, .accordion-item, .toast {
    background: var(--rx-surface) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    box-shadow: var(--rx-shadow) !important;
    color: var(--rx-text);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.card .card { background: var(--rx-surface-2) !important; box-shadow: none !important; }
.card-header, .card-footer, .modal-header, .modal-footer {
    background: transparent !important; border-color: var(--rx-border) !important;
}
.card-header { padding: 1.1rem 1.35rem; }
.card-body { padding: 1.35rem; }
.card-header-title { font-weight: 600; font-size: 1rem; }
.card-hover-shadow:hover { transform: translateY(-2px); box-shadow: var(--rx-glow) !important; }
.card.bg-primary, .card.card-primary { background: var(--rx-grad) !important; border: 0 !important; box-shadow: var(--rx-glow) !important; }
.card.bg-primary *, .card.card-primary * { color: #fff; }

/* ---------- buttons ---------- */
.btn { border-radius: 12px !important; font-weight: 600; letter-spacing: .01em; transition: filter .15s, transform .1s, background-color .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-soft-primary.active {
    background: var(--rx-grad) !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 8px 22px -10px rgba(104, 168, 214, .9) !important;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.12); color: #fff !important; }
.btn-soft-primary { background: rgba(97, 170, 223, .16) !important; color: #b9e2ff !important; border: 0 !important; }
.btn-soft-primary:hover { background: rgba(97, 170, 223, .28) !important; color: #fff !important; }
.btn-white, .btn-light, .btn-outline-secondary, .btn-outline-light, .btn-secondary, .btn-ghost-light {
    background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--rx-border-strong) !important; color: var(--rx-text) !important;
}
.btn-white:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-secondary:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.btn-outline-primary { border: 1px solid rgba(136, 205, 255, .55) !important; color: #b9e2ff !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--rx-grad) !important; color: #fff !important; border-color: transparent !important; }
.btn-success { background: linear-gradient(120deg, #22b07f, #2fd39a) !important; border: 0 !important; color: #06201a !important; }
.btn-danger { background: linear-gradient(120deg, #e0457a, #ff5f8f) !important; border: 0 !important; color: #fff !important; }
.btn-warning { background: linear-gradient(120deg, #f5a524, #ffbd4a) !important; border: 0 !important; color: #2a1a00 !important; }
.btn-info { background: linear-gradient(120deg, #2969d7, #54d4ff) !important; border: 0 !important; color: #fff !important; }
.btn-dark { background: #091425 !important; border: 1px solid var(--rx-border-strong) !important; color: #fff !important; }
.btn-soft-success { background: rgba(47, 211, 154, .14) !important; color: var(--rx-success) !important; border: 0 !important; }
.btn-soft-danger { background: rgba(255, 95, 143, .14) !important; color: var(--rx-danger) !important; border: 0 !important; }
.btn-soft-secondary, .btn-ghost-secondary.active { background: rgba(255, 255, 255, .06) !important; color: var(--rx-text) !important; border: 0 !important; }
.btn-link { color: #a8dbff !important; }

/* ---------- forms ---------- */
.form-label, .col-form-label, .input-label { color: var(--rx-muted) !important; font-weight: 600; font-size: .82rem; }
.form-control, .form-select, .input-group-text, .input-group-merge .input-group-text, .form-control-plaintext, .tom-select-custom .ts-control, .select2-selection {
    background-color: rgba(7, 15, 26, .55) !important; border: 1px solid var(--rx-border-strong) !important; color: var(--rx-text) !important;
    border-radius: 12px !important;
}
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child), .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-text:not(:first-child), .input-group > .btn:not(:first-child), .input-group > .input-group-append { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-merge .input-group-prepend.input-group-text, .input-group-merge .input-group-append.input-group-text { background: transparent !important; border: 0 !important; }
.input-group-text { color: var(--rx-muted) !important; }
.form-control::placeholder { color: var(--rx-faint) !important; }
.form-control:focus, .form-select:focus { border-color: #79c0f3 !important; box-shadow: 0 0 0 .22rem rgba(97, 170, 223, .25) !important; background-color: rgba(7, 15, 26, .7) !important; }
.form-control:disabled, .form-control[readonly] { background-color: rgba(255, 255, 255, .03) !important; color: var(--rx-muted) !important; }
.form-select option { background: var(--rx-surface-solid); color: var(--rx-text); }
.form-check-input { background-color: rgba(7, 15, 26, .6) !important; border-color: var(--rx-border-strong) !important; }
.form-check-input:checked { background-color: #61aadf !important; border-color: #61aadf !important; }
.form-switch .form-check-input:checked { background-color: #61aadf !important; }
label.form-control:has(.form-check-input:checked) { border-color: #79c0f3 !important; background: rgba(97, 170, 223, .12) !important; }
.invalid-feedback { color: var(--rx-danger) !important; }
.filepond--panel-root { background: rgba(7, 15, 26, .55) !important; border: 1px dashed var(--rx-border-strong) !important; }
.filepond--drop-label { color: var(--rx-muted) !important; background: transparent !important; }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--rx-text); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-hover-bg: rgba(97, 170, 223, .08); color: var(--rx-text) !important; border-color: var(--rx-border) !important; }
.table > :not(caption) > * > * { border-bottom-color: var(--rx-border) !important; padding-top: .85rem; padding-bottom: .85rem; }
.table thead th, .thead-light th, .table-thead-bordered thead th {
    background: rgba(97, 170, 223, .1) !important; color: var(--rx-muted) !important; border-color: var(--rx-border) !important;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.table-light, .table-light > th, .table-light > td { --bs-table-bg: rgba(97, 170, 223, .1); color: var(--rx-text) !important; }
.table-responsive { border-radius: 0 0 var(--rx-radius) var(--rx-radius); }

/* ---------- badges, alerts, list groups ---------- */
.badge { border-radius: 999px; font-weight: 600; padding: .42em .75em; letter-spacing: .02em; }
.badge.bg-primary { background: var(--rx-grad) !important; }
.badge.bg-success, .badge.bg-soft-success { background: rgba(47, 211, 154, .16) !important; color: var(--rx-success) !important; }
.badge.bg-danger, .badge.bg-soft-danger { background: rgba(255, 95, 143, .16) !important; color: var(--rx-danger) !important; }
.badge.bg-warning, .badge.bg-soft-warning { background: rgba(255, 189, 74, .16) !important; color: var(--rx-warning) !important; }
.badge.bg-info, .badge.bg-soft-info { background: rgba(84, 212, 255, .16) !important; color: var(--rx-info) !important; }
.badge.bg-secondary, .badge.bg-soft-secondary, .badge.bg-dark, .badge.bg-light { background: rgba(255, 255, 255, .08) !important; color: var(--rx-muted) !important; }
.alert { border-radius: 14px !important; border: 1px solid transparent !important; }
.alert-success, .alert-soft-success { background: rgba(47, 211, 154, .12) !important; color: #7ff0c5 !important; border-color: rgba(47, 211, 154, .3) !important; }
.alert-danger, .alert-soft-danger { background: rgba(255, 95, 143, .12) !important; color: #ffa3bf !important; border-color: rgba(255, 95, 143, .3) !important; }
.alert-warning, .alert-soft-warning { background: rgba(255, 189, 74, .12) !important; color: #ffd48a !important; border-color: rgba(255, 189, 74, .3) !important; }
.alert-info, .alert-primary, .alert-soft-primary, .alert-soft-info { background: rgba(97, 170, 223, .14) !important; color: #c4e6ff !important; border-color: rgba(97, 170, 223, .35) !important; }
.list-group { overflow: hidden; }
.list-group-item { background: transparent !important; color: var(--rx-text) !important; border-color: var(--rx-border) !important; }
.list-group-item.active { background: var(--rx-grad-soft) !important; }
.list-group-item-action:hover { background: rgba(255, 255, 255, .04) !important; }

/* ---------- dropdowns, modals, tooltips ---------- */
.dropdown-menu { padding: .5rem; }
.dropdown-item { color: var(--rx-text) !important; border-radius: 10px; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background: rgba(97, 170, 223, .16) !important; color: #fff !important; }
.dropdown-header { color: var(--rx-faint) !important; }
.modal-backdrop.show { opacity: .7; background: #03080f; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.tooltip-inner { background: #172e51; color: #fff; border: 1px solid var(--rx-border-strong); }

/* ---------- nav tabs / pills / segments ---------- */
.nav-tabs { border-bottom-color: var(--rx-border) !important; }
.nav-tabs .nav-link { color: var(--rx-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: #fff !important; background: transparent !important; border-bottom-color: #79c0f3 !important; }
.nav-segment { background: rgba(255, 255, 255, .05) !important; border-radius: 14px !important; padding: .25rem !important; }
.nav-segment .nav-link { color: var(--rx-muted) !important; border-radius: 10px !important; }
.nav-segment .nav-link.active { background: var(--rx-grad) !important; color: #fff !important; box-shadow: none !important; }
.nav-pills .nav-link.active:not(.navbar-vertical .nav-link) { background: var(--rx-grad) !important; }

/* ---------- pagination ---------- */
.pagination .page-link { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--rx-border) !important; color: var(--rx-muted) !important; border-radius: 10px !important; margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--rx-grad) !important; color: #fff !important; border-color: transparent !important; }
.pagination .page-item.disabled .page-link { opacity: .45; }

/* ---------- avatars, progress, misc ---------- */
.avatar-soft-primary .avatar-initials, .avatar-primary .avatar-initials { background: var(--rx-grad) !important; color: #fff !important; }
.avatar-soft-dark .avatar-initials, .avatar-soft-secondary .avatar-initials { background: rgba(255, 255, 255, .08) !important; color: var(--rx-text) !important; }
.progress { background: rgba(255, 255, 255, .07) !important; border-radius: 999px; }
.progress-bar { background: var(--rx-grad) !important; }
.legend-indicator.bg-primary { background: #79c0f3 !important; }
.spinner-border.text-primary { color: #79c0f3 !important; }
code, .text-code { color: #b9e2ff; }
.accordion-button { background: transparent !important; color: var(--rx-text) !important; }
.accordion-button:not(.collapsed) { color: #fff !important; box-shadow: none !important; }
.step .step-icon { background: var(--rx-grad) !important; color: #fff !important; }
img[src*="empty-state"], .empty-state img { filter: hue-rotate(35deg) saturate(1.2); opacity: .85; }

/* binary / level trees */
.tree-title { color: var(--rx-text); }
.tree .card, .binary-tree .card { background: var(--rx-surface-2) !important; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(136, 205, 255, .22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* footer spacing for the mobile tab bar */
@media (max-width: 1199.98px) { .main { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; } }

/* =====================================================================================
   RevelX components (new shell)
   ===================================================================================== */
.rx-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none !important; }
.rx-brand-mark { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(104, 168, 214, .55)); }
.rx-brand-name { font-family: var(--rx-font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; color: #fff; line-height: 1; }
.rx-brand-name b { background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.rx-brand-sub { display: block; font-family: var(--rx-font); font-size: .58rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rx-faint); margin-top: .3rem; }
.rx-brand img.rx-brand-custom { max-height: 38px; width: auto; }

/* sidebar user card */
.rx-usercard { margin: .25rem 1rem 1rem; padding: .9rem; border-radius: 16px; background: var(--rx-grad-soft); border: 1px solid var(--rx-border); display: flex; align-items: center; gap: .75rem; }
.rx-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--rx-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--rx-font-display); box-shadow: var(--rx-glow); }
.rx-usercard .rx-u-name { font-weight: 600; color: #fff; font-size: .9rem; line-height: 1.2; }
.rx-usercard .rx-u-id { color: var(--rx-muted); font-size: .75rem; }
.navbar-vertical-aside-mini-mode .rx-usercard, .navbar-vertical-aside-mini-mode .rx-brand-text { display: none !important; }

/* top bar */
.rx-topbar-title { font-family: var(--rx-font-display); font-weight: 600; color: #fff; font-size: 1.05rem; }
.rx-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--rx-border); color: var(--rx-text) !important; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.rx-chip i { color: #a8dbff; }
.rx-icon-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--rx-border); color: var(--rx-text) !important; }
.rx-icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff !important; }

/* mobile tab bar */
.rx-tabbar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1030; display: flex; align-items: flex-end; justify-content: space-around;
    padding: .45rem .35rem; border-radius: 22px; background: rgba(9, 20, 37, .86); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--rx-border-strong); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .8); }
.rx-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem 0 .15rem; color: var(--rx-faint) !important; font-size: .66rem; font-weight: 600; text-decoration: none !important; }
.rx-tab i { font-size: 1.25rem; line-height: 1; }
.rx-tab.is-active { color: #fff !important; }
.rx-tab.is-active i { background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx-tab-fab { margin-top: -1.8rem; }
.rx-tab-fab .rx-fab { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--rx-grad); color: #fff; font-size: 1.4rem;
    box-shadow: 0 12px 26px -8px rgba(104, 168, 214, .95), 0 0 0 5px #091425; transform: rotate(45deg); }
.rx-tab-fab .rx-fab i { transform: rotate(-45deg); background: none; -webkit-background-clip: initial; color: #fff !important; }

/* page shell helpers */
.rx-section-title { font-family: var(--rx-font-display); font-weight: 600; font-size: 1.05rem; color: #fff; }
.rx-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rx-faint); }
.rx-glass { background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: var(--rx-radius); box-shadow: var(--rx-shadow); backdrop-filter: blur(12px); }
.rx-hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(136, 205, 255, .45), transparent); border: 0; }

/* auth pages */
.rx-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .rx-auth { grid-template-columns: 1.05fr 1fr; } }
.rx-auth-art { position: relative; overflow: hidden; display: none; padding: 3rem; border-right: 1px solid var(--rx-border);
    background: radial-gradient(700px 420px at 30% 20%, rgba(90, 146, 186, .45), transparent 65%), radial-gradient(700px 420px at 80% 80%, rgba(41, 105, 215, .38), transparent 65%), linear-gradient(160deg, #09182f, #060e1a); }
@media (min-width: 992px) { .rx-auth-art { display: flex; flex-direction: column; justify-content: space-between; } }
.rx-auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 3rem; }
.rx-auth-card { width: 100%; max-width: 440px; }
.rx-auth-card .card { padding: .5rem; }
.rx-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(136, 205, 255, .18); }
.rx-auth-headline { font-family: var(--rx-font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.rx-auth-stat { padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--rx-border); }
.rx-auth-stat b { display: block; font-family: var(--rx-font-display); font-size: 1.35rem; color: #fff; }
.rx-auth-stat span { color: var(--rx-muted); font-size: .8rem; }

/* dashboard */
.rx-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 1.5rem; background: radial-gradient(500px 240px at 90% 0%, rgba(84, 212, 255, .35), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(67, 109, 172, .35), transparent 70%), linear-gradient(125deg, #1b3965 0%, #193d7c 55%, #104298 100%);
    border: 1px solid rgba(170, 220, 255, .25); box-shadow: 0 24px 50px -24px rgba(41, 105, 215, .6); }
@media (min-width: 768px) { .rx-hero { padding: 2rem; } }
.rx-hero .rx-hero-amount { font-family: var(--rx-font-display); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1; color: #fff; }
.rx-hero-orbit { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); }
.rx-hero-orbit::after { content: ''; position: absolute; inset: 40px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .12); }
.rx-kpi { padding: 1.1rem 1.2rem; }
.rx-kpi-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; }
.rx-kpi-value { font-family: var(--rx-font-display); font-weight: 700; font-size: 1.45rem; color: #fff; line-height: 1.15; }
.rx-kpi-label { color: var(--rx-muted); font-size: .8rem; font-weight: 500; }
.rx-ico-purple { background: linear-gradient(135deg, #5a92ba, #4d72aa); box-shadow: 0 8px 18px -8px rgba(90, 146, 186, .9); }
.rx-ico-blue { background: linear-gradient(135deg, #2969d7, #1a4faa); box-shadow: 0 8px 18px -8px rgba(41, 105, 215, .9); }
.rx-ico-green { background: linear-gradient(135deg, #22b07f, #148a60); box-shadow: 0 8px 18px -8px rgba(47, 211, 154, .7); }
.rx-ico-pink { background: linear-gradient(135deg, #5796c3, #3d629a); box-shadow: 0 8px 18px -8px rgba(87, 150, 195, .8); }
.rx-ico-amber { background: linear-gradient(135deg, #f5a524, #c77a0f); box-shadow: 0 8px 18px -8px rgba(245, 165, 36, .7); }
.rx-action { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1rem .5rem; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--rx-border); color: var(--rx-text) !important; text-decoration: none !important; font-size: .8rem; font-weight: 600; text-align: center; transition: all .15s; }
.rx-action:hover { background: var(--rx-grad-soft); border-color: var(--rx-border-strong); color: #fff !important; transform: translateY(-2px); }
.rx-refbox { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .9rem; border-radius: 14px; background: rgba(7, 15, 26, .55); border: 1px solid var(--rx-border-strong); }
.rx-refbox input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--rx-text); font-size: .85rem; outline: none; }
.rx-empty { padding: 2.5rem 1rem; text-align: center; color: var(--rx-muted); }
.rx-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--rx-border); }
.rx-row:last-child { border-bottom: 0; }

/* mobile sidebar: room for the tab bar, no stray toggler when closed */
@media (max-width: 1199.98px) {
    .navbar-vertical-aside .navbar-vertical-content { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
    .navbar-vertical-aside .navbar-aside-toggler { display: none !important; }
    .navbar-vertical-aside-mobile-overlay { background: rgba(3, 8, 15, .7) !important; backdrop-filter: blur(3px); }
}