:root {
    --xai-bg: #07090d;
    --xai-bg-soft: #0e1118;
    --xai-panel: rgba(27, 30, 39, .82);
    --xai-panel-strong: rgba(19, 22, 30, .96);
    --xai-panel-light: rgba(255, 255, 255, .07);
    --xai-border: rgba(255, 255, 255, .18);
    --xai-border-soft: rgba(255, 255, 255, .10);
    --xai-red: #ff304f;
    --xai-red-dark: #c81231;
    --xai-red-soft: rgba(255, 48, 79, .15);
    --xai-white: #f7f8fb;
    --xai-muted: #a7abb6;
    --xai-success: #27d9a1;
    --xai-warning: #ffbd45;
    --xai-danger: #ff5a72;
    --xai-radius: 18px;
    --xai-radius-sm: 12px;
    --xai-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    --xai-glow: 0 0 0 1px rgba(255,48,79,.3), 0 14px 42px rgba(255,48,79,.14);
    --xai-sidebar: 270px;
    --xai-topbar: 74px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--xai-bg); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--xai-white) !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    background:
        radial-gradient(circle at 88% 0%, rgba(190, 13, 43, .30), transparent 31rem),
        radial-gradient(circle at 0% 80%, rgba(255, 48, 79, .13), transparent 28rem),
        linear-gradient(145deg, #080a0f 0%, #0d1118 48%, #07080c 100%) !important;
    background-attachment: fixed !important;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, #000, transparent 85%);
}

a { color: #fff; text-decoration: none; }
a:hover, a:focus { color: var(--xai-red); text-decoration: none; }
img { max-width: 100%; height: auto; }
hr { border-color: var(--xai-border-soft); opacity: 1; }
::selection { background: var(--xai-red); color: #fff; }

/* App shell */
.xai-app { min-height: 100vh; }
.xai-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1050;
    height: var(--xai-topbar);
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid var(--xai-border-soft);
    background: rgba(8, 10, 15, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 34px rgba(0,0,0,.26);
}
.xai-topbar-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.xai-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.xai-brand img { width: 182px; max-height: 42px; object-fit: contain; }
.xai-brand-mark {
    width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(145deg, #ff4865, #b90d2c);
    box-shadow: 0 0 24px rgba(255,48,79,.38);
}
.xai-topbar-title { color: var(--xai-muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.xai-user-chip {
    display: flex; align-items: center; gap: 11px; min-width: 0;
    padding: 8px 12px 8px 9px; border: 1px solid var(--xai-border-soft);
    border-radius: 999px; background: rgba(255,255,255,.045);
}
.xai-user-avatar {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
    color: #fff; background: linear-gradient(145deg, rgba(255,48,79,.9), rgba(133,9,32,.95));
    box-shadow: 0 0 18px rgba(255,48,79,.25);
}
.xai-user-copy { min-width: 0; line-height: 1.2; }
.xai-user-copy strong, .xai-user-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xai-user-copy strong { max-width: 180px; font-size: 14px; }
.xai-user-copy span { max-width: 180px; color: var(--xai-muted); font-size: 11px; margin-top: 3px; }
.xai-icon-btn {
    width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0;
    color: #fff; border: 1px solid var(--xai-border-soft); border-radius: 12px;
    background: rgba(255,255,255,.045); cursor: pointer; transition: .2s ease;
}
.xai-icon-btn:hover { color: #fff; border-color: rgba(255,48,79,.6); background: var(--xai-red-soft); box-shadow: var(--xai-glow); }
.xai-menu-toggle { display: none; }

.xai-sidebar {
    position: fixed; left: 0; top: var(--xai-topbar); bottom: 0; z-index: 1040;
    width: var(--xai-sidebar); padding: 20px 14px 28px; overflow-y: auto;
    border-right: 1px solid var(--xai-border-soft);
    background: rgba(10, 12, 18, .92);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.xai-nav-caption { padding: 8px 14px 10px; color: #737986; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.xai-nav { margin: 0; padding: 0; list-style: none; }
.xai-nav li { margin: 5px 0; }
.xai-nav a {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px;
    padding: 11px 14px; color: #c7cad2; border: 1px solid transparent; border-radius: 13px;
    font-weight: 600; transition: .2s ease;
}
.xai-nav a i { width: 21px; text-align: center; color: #8f95a2; font-size: 17px; }
.xai-nav a:hover, .xai-nav a.is-active {
    color: #fff; border-color: rgba(255,48,79,.36);
    background: linear-gradient(90deg, rgba(255,48,79,.18), rgba(255,255,255,.035));
    box-shadow: inset 3px 0 0 var(--xai-red), 0 10px 26px rgba(0,0,0,.18);
}
.xai-nav a:hover i, .xai-nav a.is-active i { color: var(--xai-red); }
.xai-sidebar-card {
    margin: 18px 5px 0; padding: 16px; border: 1px solid rgba(255,48,79,.28); border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,48,79,.16), rgba(255,255,255,.035));
}
.xai-sidebar-card small { color: var(--xai-muted); }
.xai-sidebar-card strong { display: block; margin-top: 5px; }

.xai-main { min-height: 100vh; padding: calc(var(--xai-topbar) + 22px) 24px 104px calc(var(--xai-sidebar) + 24px); }
.xai-content { width: 100%; max-width: 1480px; margin: 0 auto; }
.xai-sidebar-backdrop { display: none; }

/* Mobile bottom navigation */
.xai-bottom-nav {
    display: none; position: fixed; z-index: 1035; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
    min-height: 66px; padding: 7px; border: 1px solid var(--xai-border-soft); border-radius: 20px;
    background: rgba(12,14,20,.94); box-shadow: 0 18px 50px rgba(0,0,0,.52);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.xai-bottom-nav ul { width: 100%; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); list-style: none; }
.xai-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 50px; color: #8f95a1; font-size: 10px; font-weight: 600; border-radius: 14px; }
.xai-bottom-nav a i { font-size: 18px; }
.xai-bottom-nav a:hover, .xai-bottom-nav a.is-active { color: #fff; background: var(--xai-red-soft); }
.xai-bottom-nav a.is-active i { color: var(--xai-red); }

/* Page typography */
h1, h2, h3, h4, h5, h6 { color: var(--xai-white) !important; font-weight: 750; letter-spacing: -.02em; }
h1, .page-title { font-size: clamp(28px, 4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 36px); }
h3 { font-size: clamp(20px, 2.2vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
p, label, .form-label { color: #d8dbe2; }
.text-muted, small, .small { color: var(--xai-muted) !important; }
.text-primary { color: var(--xai-red) !important; }
.text-success { color: var(--xai-success) !important; }
.text-danger { color: var(--xai-danger) !important; }

.site-title, .page-header, .breadcrumb-contain h2, .wrapperrow > div > .row:first-child h3 {
    position: relative; margin: 0 0 22px !important; padding-bottom: 13px; text-transform: uppercase;
    font-weight: 800 !important; letter-spacing: .025em;
}
.site-title::after, .page-header::after, .breadcrumb-contain h2::after, .wrapperrow > div > .row:first-child h3::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: min(220px, 60%); height: 2px;
    background: linear-gradient(90deg, var(--xai-red), rgba(255,48,79,0)); box-shadow: 0 0 14px rgba(255,48,79,.8);
}

/* Generic frosted surfaces */
.xai-panel, .card, .panel, .well, .jumbotron, .modal-content, .road-map-item-content,
.choose-item, .tf-list-item, .blog-comments-single, .login-page .form-group,
.r3_counter_box, .wrapperrow, .breadcrumb-main .breadcrumb-contain,
.bg-menuDark.tf-container, .table-container {
    border: 1px solid var(--xai-border-soft) !important;
    border-radius: var(--xai-radius) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    box-shadow: var(--xai-shadow);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.card, .panel, .well, .jumbotron { overflow: hidden; }
.card-header, .panel-heading, .modal-header {
    color: #fff !important; border-color: var(--xai-border-soft) !important;
    background: rgba(255,255,255,.045) !important;
}
.card-body, .panel-body { color: #fff; }

.tf-container { width: 100% !important; max-width: none !important; margin: 0 0 20px !important; padding: 20px !important; }
.bg-menuDark { background: transparent !important; }
.bg-menuDark.tf-container { position: relative; overflow: hidden; }
.bg-menuDark.tf-container::before {
    content: ""; position: absolute; width: 240px; height: 240px; right: -100px; top: -120px;
    border-radius: 50%; background: rgba(255,48,79,.14); filter: blur(30px); pointer-events: none;
}
.blur-bg-1, .blur-bg-2 { background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.028)) !important; }
.road-map-item-info h5 { margin-bottom: 4px; color: var(--xai-muted) !important; font-size: 13px; text-transform: uppercase; letter-spacing: .09em; }
.road-map-item-info p { margin: 0; font-size: clamp(30px, 5vw, 52px); font-weight: 850; line-height: 1.05; color: #fff; }
.road-map-item-content h3 { margin: 14px 0 0; color: var(--xai-red) !important; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

.choose-item, a.choose-item {
    display: flex !important; min-height: 126px; height: 100%; padding: 20px !important;
    color: #fff !important; overflow: hidden; position: relative; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.choose-item::after {
    content: ""; position: absolute; inset: auto -20% -65% auto; width: 150px; height: 150px; border-radius: 50%;
    background: rgba(255,48,79,.14); filter: blur(16px); pointer-events: none;
}
.choose-item:hover { transform: translateY(-3px); border-color: rgba(255,48,79,.62) !important; box-shadow: var(--xai-glow); }
.choose-item-content, .choose-item .title { width: 100%; display: flex; flex-direction: column; justify-content: center; }
.choose-item h5, .choose-item h4, .choose-item h3 { margin: 3px 0; }
.choose-item h5:first-child, .choose-item h3:first-child { color: var(--xai-muted) !important; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .055em; }
.choose-item h5:last-child, .choose-item h4:last-child { color: #fff !important; font-size: clamp(21px, 3vw, 31px); font-weight: 850; }

.tf-list-item, a.tf-list-item {
    min-height: 112px; height: 100%; padding: 16px 10px !important; color: #fff !important;
    border-radius: 16px !important; transition: .2s ease;
}
a.tf-list-item:hover { transform: translateY(-3px); border-color: rgba(255,48,79,.62) !important; box-shadow: var(--xai-glow); }
.tf-list-item i { color: var(--xai-red); font-size: 24px; }
.tf-list-item .logo { width: 44px !important; height: 44px !important; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,48,79,.5)); }
.grid-2, .grid-3, .grid-4 { display: grid !important; gap: 12px; padding: 0; list-style: none; }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }

.blog-comments-single { padding: 18px; margin-bottom: 12px; }
.blog-comments-content { width: 100%; }

/* Breadcrumb/legacy content */
.breadcrumb-main { background: transparent !important; padding: 0 !important; margin-bottom: 20px; }
.breadcrumb-main .container, .custom-container, .container { max-width: 100% !important; }
.breadcrumb-main .breadcrumb-contain { padding: 20px 22px; }
.breadcrumb-contain ul { margin: 8px 0 0; padding: 0; display: flex; gap: 8px; align-items: center; list-style: none; color: var(--xai-muted); }
.breadcrumb-contain ul a { color: var(--xai-muted); }
section.login-page, .section-big-py-space, .bg-light { padding: 0 !important; background: transparent !important; }
.wrapperrow { margin: 0 !important; padding: 20px 12px; }

/* Form controls */
.form-group { margin-bottom: 16px; }
.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="tel"], select, textarea {
    min-height: 46px; width: 100%; color: #fff !important; caret-color: var(--xai-red);
    border: 1px solid rgba(255,255,255,.17) !important; border-radius: 12px !important;
    background-color: rgba(2,4,8,.52) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
textarea.form-control, textarea { min-height: 110px; padding-top: 12px; }
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: rgba(255,48,79,.8) !important; outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(255,48,79,.13), 0 0 22px rgba(255,48,79,.12) !important;
    background-color: rgba(8,10,15,.82) !important;
}
.form-control[disabled], .form-control[readonly], input[disabled], input[readonly] { opacity: .72; background: rgba(255,255,255,.045) !important; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #777e8d !important; }
select option { color: #fff; background: #11151d; }
.input-group-addon, .input-group-text { color: #fff; border-color: var(--xai-border-soft); background: rgba(255,255,255,.06); }
.checkbox label, .radio label { color: #dfe2e8; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--xai-red); }

/* Buttons */
.btn, input[type="submit"], input[type="button"], button {
    border-radius: 12px !important; font-weight: 750 !important; letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.btn { min-height: 42px; padding: 10px 18px; }
.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { transform: translateY(-1px); }
.btn-primary, .btn-success, input.btn-primary, input.btn-success {
    color: #fff !important; border: 1px solid rgba(255,99,123,.75) !important;
    background: linear-gradient(135deg, #ff3d5c 0%, #bd0d2c 100%) !important;
    box-shadow: 0 10px 24px rgba(210,14,47,.25) !important;
}
.btn-primary:hover, .btn-success:hover { box-shadow: 0 14px 32px rgba(255,48,79,.36) !important; }
.btn-default, .btn-secondary, .btn-dark {
    color: #fff !important; border: 1px solid var(--xai-border) !important; background: rgba(255,255,255,.075) !important;
}
.btn-danger { color: #fff !important; border-color: #ff5a72 !important; background: linear-gradient(135deg,#ff5a72,#a20d27) !important; }
.btn-warning { color: #181006 !important; border-color: #ffcc69 !important; background: linear-gradient(135deg,#ffd47e,#e99b18) !important; }
.btn-link { color: var(--xai-red) !important; }

/* Tables and ASP.NET grids */
.table-responsive, .xai-table-wrap { width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-radius: 15px; }
table, .table { color: #e9ebef !important; background: transparent !important; border-collapse: separate !important; border-spacing: 0 !important; }
.table { min-width: 620px; margin-bottom: 0; }
.table > thead > tr > th, .table thead th, .GridViewStyle th, table th {
    padding: 14px 13px !important; color: #fff !important; font-size: 12px; font-weight: 800;
    letter-spacing: .055em; text-transform: uppercase; white-space: nowrap;
    border-color: rgba(255,255,255,.13) !important; background: rgba(255,48,79,.13) !important;
}
.table > tbody > tr > td, .table tbody td, .GridViewStyle td, table td {
    padding: 13px !important; color: #d9dce3 !important; border-color: rgba(255,255,255,.085) !important;
    background: rgba(255,255,255,.018) !important; vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { color: #e6e8ed; background: rgba(255,255,255,.035) !important; }
.table-hover > tbody > tr:hover > *, .table tbody tr:hover td { background: rgba(255,48,79,.075) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: rgba(255,255,255,.10) !important; }
.table a { color: #fff; }
.table a:hover { color: var(--xai-red); }
.gridpagerstyle, .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 14px 0; }
.gridpagerstyle a, .gridpagerstyle span, .pagination > li > a, .pagination > li > span {
    min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; margin: 0 !important; padding: 6px 10px !important;
    color: #fff !important; border: 1px solid var(--xai-border-soft) !important; border-radius: 10px !important; background: rgba(255,255,255,.055) !important;
}
.gridpagerstyle span, .pagination > .active > a, .pagination > .active > span { border-color: var(--xai-red) !important; background: var(--xai-red) !important; }

/* Tabs, alerts, badges */
.nav-tabs { border-color: var(--xai-border-soft); gap: 6px; }
.nav-tabs > li > a, .nav-tabs .nav-link { color: var(--xai-muted); border: 1px solid transparent !important; border-radius: 11px 11px 0 0 !important; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover, .nav-tabs .nav-link.active { color: #fff !important; border-color: rgba(255,48,79,.35) !important; background: var(--xai-red-soft) !important; }
.alert { color: #fff; border-radius: 14px; border: 1px solid var(--xai-border-soft); background: rgba(255,255,255,.06); }
.alert-success { border-color: rgba(39,217,161,.4); background: rgba(39,217,161,.11); }
.alert-danger { border-color: rgba(255,90,114,.4); background: rgba(255,90,114,.11); }
.badge, .label, .tag-xs { border-radius: 999px !important; padding: 6px 10px !important; }
.label-success, .badge-success { background: rgba(39,217,161,.18) !important; color: #6cf5c8 !important; }
.label-danger, .badge-danger { background: rgba(255,90,114,.18) !important; color: #ff8799 !important; }

/* Modal and popups */
.modal-backdrop, .PopupBG { background: #010205 !important; opacity: .82 !important; }
.modal-content, .modalPopup-dialog { border: 1px solid rgba(255,48,79,.32) !important; background: rgba(15,18,25,.98) !important; box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 42px rgba(255,48,79,.11) !important; }
.modal-header, .modal-footer { border-color: var(--xai-border-soft) !important; }
.close { color: #fff !important; text-shadow: none; opacity: .8; }

/* Dashboard old ticker */
.TickerNews { overflow: hidden; border-radius: 14px; border: 1px solid var(--xai-border-soft); background: rgba(255,255,255,.05); }
.TickerNews .ti_news a { color: #fff !important; }

/* Select2 */
.select2-container .select2-selection--single, .select2-container .select2-selection--multiple {
    min-height: 46px; color: #fff; border: 1px solid rgba(255,255,255,.17) !important; border-radius: 12px !important; background: rgba(2,4,8,.52) !important;
}
.select2-dropdown { color: #fff; border-color: var(--xai-border-soft); background: #121620; }
.select2-results__option--highlighted { background: var(--xai-red) !important; }

/* Legacy tree pages */
.BTreeLink { min-width: 126px; padding: 12px 9px; border: 1px solid var(--xai-border-soft); border-radius: 14px; background: rgba(255,255,255,.05); }
.BTreeLink:hover { border-color: rgba(255,48,79,.55); box-shadow: var(--xai-glow); }
.BTreeLink img { max-width: 100%; }

/* Public/auth pages using shared theme */
.xai-public-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.xai-public-header { padding: 18px 24px; border-bottom: 1px solid var(--xai-border-soft); background: rgba(8,10,15,.82); backdrop-filter: blur(18px); }
.xai-public-header .xai-brand img { width: 190px; }
.xai-public-main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 44px 22px; }
.xai-public-footer { padding: 22px; color: var(--xai-muted); text-align: center; border-top: 1px solid var(--xai-border-soft); }
.xai-auth-frame { max-width: 540px; margin: 0 auto; padding: clamp(22px,4vw,42px); border: 1px solid rgba(255,48,79,.28); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: var(--xai-shadow), 0 0 46px rgba(255,48,79,.09); }

/* Utility */
.hidden { display: none !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; }
.rounded { border-radius: var(--xai-radius-sm) !important; }
.xai-section { margin-bottom: 22px; }
.xai-page-ready { animation: xaiFade .32s ease both; }
@keyframes xaiFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 1199px) {
    .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
    :root { --xai-topbar: 66px; }
    .xai-topbar { padding: 0 14px; }
    .xai-menu-toggle { display: inline-grid; }
    .xai-brand img { width: 150px; }
    .xai-user-copy { display: none; }
    .xai-user-chip { padding: 6px; border-radius: 13px; }
    .xai-sidebar { top: 0; z-index: 1060; width: min(84vw, 290px); padding-top: 24px; transform: translateX(-105%); transition: transform .24s ease; box-shadow: 24px 0 70px rgba(0,0,0,.55); }
    body.xai-sidebar-open .xai-sidebar { transform: translateX(0); }
    .xai-sidebar-backdrop { position: fixed; inset: 0; z-index: 1055; background: rgba(0,0,0,.68); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    body.xai-sidebar-open .xai-sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .xai-main { padding: calc(var(--xai-topbar) + 16px) 14px 96px; }
    .xai-bottom-nav { display: block; }
    .tf-container { padding: 16px !important; }
}

@media (max-width: 767.98px) {
    .row { --bs-gutter-x: 14px; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .choose-item, a.choose-item { min-height: 108px; padding: 16px !important; }
    .tf-list-item, a.tf-list-item { min-height: 100px; font-size: 12px; }
    .table { min-width: 680px; }
    .breadcrumb-main .breadcrumb-contain { padding: 17px; }
    .xai-public-main { padding: 28px 14px; }
}

@media (max-width: 479.98px) {
    .xai-brand img { width: 132px; }
    .xai-topbar { padding: 0 10px; }
    .xai-icon-btn { width: 39px; height: 39px; }
    .grid-2, .grid-3, .grid-4 { gap: 9px; }
    .tf-container { padding: 13px !important; }
    .tf-list-item, a.tf-list-item { padding: 12px 7px !important; }
    .choose-item h5:last-child, .choose-item h4:last-child { font-size: 20px; }
    .xai-bottom-nav { left: 6px; right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media print {
    .xai-topbar, .xai-sidebar, .xai-bottom-nav, .xai-sidebar-backdrop { display: none !important; }
    .xai-main { padding: 0 !important; }
    body { color: #000 !important; background: #fff !important; }
    .card, .panel, .well, .tf-container { box-shadow: none !important; background: #fff !important; border-color: #ccc !important; }
    .table td, .table th { color: #000 !important; background: #fff !important; }
}
.login-area { padding: clamp(34px, 7vw, 86px) 0 !important; }
.login-form {
    padding: clamp(22px, 4vw, 38px) !important;
    color: #fff !important;
    border: 1px solid rgba(255,48,79,.30) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)) !important;
    box-shadow: 0 26px 75px rgba(0,0,0,.48), 0 0 50px rgba(255,48,79,.08) !important;
    backdrop-filter: blur(18px);
}
.login-header { margin-bottom: 25px; text-align: center; }
.login-header img { width: 150px !important; max-height: 70px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255,48,79,.3)); }
.login-header p { margin: 12px 0 0; color: var(--xai-muted) !important; text-transform: capitalize; }
.login-footer { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--xai-border-soft); text-align: center; }
.login-footer p { margin: 0; color: var(--xai-muted); }
.login-footer a, .forgot-pass { color: var(--xai-red) !important; cursor: pointer; }
.theme-btn {
    width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    color: #fff !important; border: 1px solid rgba(255,99,123,.75) !important; border-radius: 13px !important;
    background: linear-gradient(135deg,#ff3d5c,#bd0d2c) !important; box-shadow: 0 12px 30px rgba(210,14,47,.28) !important;
    font-weight: 800 !important;
}
.theme-btn:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255,48,79,.36) !important; }
.account__form .form-check-label { color: var(--xai-muted); }
.xai-dashboard-hero {
    position: relative; overflow: hidden; margin-bottom: 22px; padding: clamp(22px,4vw,38px);
    border: 1px solid rgba(255,48,79,.28); border-radius: 24px;
    background:
        linear-gradient(110deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
        radial-gradient(circle at 86% 45%, rgba(255,48,79,.23), transparent 24rem);
    box-shadow: var(--xai-shadow), 0 0 50px rgba(255,48,79,.08);
}
.xai-dashboard-hero::after {
    content: ""; position: absolute; right: clamp(18px,6vw,78px); top: 50%; width: 128px; height: 128px;
    transform: translateY(-50%) rotate(45deg); border: 1px solid rgba(255,255,255,.28); border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,48,79,.13));
    box-shadow: inset 0 0 0 10px rgba(255,255,255,.025), 0 0 50px rgba(255,48,79,.17);
}
.xai-dashboard-hero h1 { position: relative; z-index: 1; margin: 0; text-transform: uppercase; }
.xai-dashboard-hero h1 span { color: var(--xai-red); }
.xai-dashboard-hero p { position: relative; z-index: 1; max-width: 610px; margin: 9px 0 0; color: var(--xai-muted); }
.xai-dashboard-hero .xai-kicker { color: var(--xai-red); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
@media(max-width:767.98px){.xai-dashboard-hero::after{right:-58px;width:110px;height:110px;opacity:.55}.xai-dashboard-hero p{max-width:82%}}

/* ========================================================================
   XAI PROFESSIONAL CRYPTO UI — PDF MATCHED BLACK / SILVER / CRIMSON THEME
   ======================================================================== */
:root {
    --xai-bg: #050608;
    --xai-bg-soft: #0a0c11;
    --xai-panel: rgba(18, 20, 27, .88);
    --xai-panel-strong: rgba(12, 14, 19, .97);
    --xai-panel-light: rgba(255, 255, 255, .055);
    --xai-border: rgba(224, 228, 237, .18);
    --xai-border-soft: rgba(224, 228, 237, .10);
    --xai-red: #ff274b;
    --xai-red-dark: #b70b2a;
    --xai-red-soft: rgba(255, 39, 75, .14);
    --xai-silver: #cfd3dc;
    --xai-white: #f8f9fb;
    --xai-muted: #9ca2af;
    --xai-success: #40e0a7;
    --xai-radius: 18px;
    --xai-radius-lg: 24px;
    --xai-shadow: 0 26px 70px rgba(0, 0, 0, .42);
    --xai-glow: 0 0 0 1px rgba(255,39,75,.28), 0 18px 50px rgba(255,39,75,.12);
}

html,
body,
.xai-app,
.xai-main,
.xai-content,
.content-wrapper,
.main-content,
.page-wrapper,
#page-wrapper,
.wrapper,
.wrapperrow {
    background-color: transparent !important;
}

body {
    background:
        radial-gradient(circle at 89% -8%, rgba(145, 5, 31, .34), transparent 34rem),
        radial-gradient(circle at -8% 92%, rgba(255, 39, 75, .10), transparent 30rem),
        linear-gradient(145deg, #040507 0%, #0a0c11 48%, #050609 100%) !important;
}

body::before {
    opacity: .19;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,39,75,.15) 0 1px, transparent 1.5px);
    background-size: 46px 46px, 46px 46px, 92px 92px;
}

/* Eliminate legacy blue/cyan theme classes across member pages. */
.bg-primary,
.bg-info,
.bg-gradient-primary,
.bg-gradient-info,
.badge-primary,
.badge-info,
.label-primary,
.label-info,
.progress-bar,
.nav-pills .nav-link.active,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.table-primary > *,
.table-info > * {
    color: #fff !important;
    border-color: rgba(255, 80, 107, .55) !important;
    background: linear-gradient(135deg, var(--xai-red), var(--xai-red-dark)) !important;
}

.text-primary,
.text-info,
a.text-primary,
a.text-info,
.link-primary,
.link-info {
    color: var(--xai-red) !important;
}

.border-primary,
.border-info {
    border-color: rgba(255, 39, 75, .60) !important;
}

.btn-info,
.btn-outline-primary,
.btn-outline-info {
    color: #fff !important;
    border-color: rgba(255, 72, 101, .62) !important;
    background: linear-gradient(135deg, rgba(255,39,75,.95), rgba(183,11,42,.95)) !important;
    box-shadow: 0 10px 26px rgba(183,11,42,.20) !important;
}

.btn-info:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover {
    color: #fff !important;
    border-color: rgba(255, 124, 143, .85) !important;
    background: linear-gradient(135deg, #ff3f5f, #ca1032) !important;
}

.alert-info {
    color: #f1f3f7 !important;
    border-color: rgba(255,39,75,.30) !important;
    background: rgba(255,39,75,.09) !important;
}

/* Premium member shell */
.xai-topbar {
    border-bottom-color: rgba(255,255,255,.085);
    background: rgba(5, 6, 9, .92);
    box-shadow: 0 10px 38px rgba(0,0,0,.34);
}

.xai-topbar-left,
.xai-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.xai-network-pill {
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--xai-muted);
    border: 1px solid var(--xai-border-soft);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    font-size: 11px;
    white-space: nowrap;
}
.xai-network-pill strong { color: #dbdee5; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.xai-network-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xai-success);
    box-shadow: 0 0 0 4px rgba(64,224,167,.10), 0 0 12px rgba(64,224,167,.65);
}

.xai-topbar-cta {
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    color: #fff;
    border: 1px solid rgba(255,91,117,.70);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--xai-red), var(--xai-red-dark));
    box-shadow: 0 10px 25px rgba(183,11,42,.25);
    font-size: 12px;
    font-weight: 800;
}
.xai-topbar-cta:hover { color: #fff; box-shadow: 0 14px 32px rgba(255,39,75,.30); transform: translateY(-1px); }
.xai-user-chevron { color: #747a87; font-size: 10px; }

.xai-sidebar {
    border-right-color: rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%),
        rgba(7, 8, 12, .97);
}

.xai-sidebar-mobile-head {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 4px;
}

.xai-sidebar-network-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 4px 18px;
    padding: 11px;
    border: 1px solid rgba(255,39,75,.25);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,39,75,.11), rgba(255,255,255,.025));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.xai-sidebar-network-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: radial-gradient(circle at 35% 30%, #ff4f6d, #a90928 72%);
    box-shadow: 0 0 22px rgba(255,39,75,.22);
}
.xai-sidebar-network-icon img { width: 28px; height: 28px; object-fit: contain; }
.xai-sidebar-network-card small,
.xai-sidebar-network-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xai-sidebar-network-card small { color: var(--xai-muted); font-size: 10px; }
.xai-sidebar-network-card strong { color: #fff; font-size: 13px; }
.xai-sidebar-network-card > span { color: #8edfc0; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.xai-sidebar-network-card > span i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--xai-success); box-shadow: 0 0 8px rgba(64,224,167,.75); }

.xai-nav a {
    min-height: 46px;
    color: #b9bec9;
    border-radius: 12px;
    font-size: 13px;
}
.xai-nav a i { color: #858b98; }
.xai-nav a:hover,
.xai-nav a.is-active {
    border-color: rgba(255,39,75,.32);
    background: linear-gradient(90deg, rgba(255,39,75,.15), rgba(255,255,255,.025));
    box-shadow: inset 3px 0 0 var(--xai-red), 0 12px 28px rgba(0,0,0,.18);
}

.xai-sidebar-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: var(--xai-red);
    font-size: 11px;
    font-weight: 800;
}

.xai-bottom-nav {
    border-color: rgba(255,255,255,.11);
    background: rgba(8,9,13,.96);
}
.xai-mobile-main-action i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-top: -24px;
    color: #fff !important;
    border: 4px solid #08090d;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--xai-red), var(--xai-red-dark));
    box-shadow: 0 10px 24px rgba(255,39,75,.28);
}

/* Professional dashboard */
.xai-dashboard-shell { display: flex; flex-direction: column; gap: 22px; }
.xai-pro-hero {
    position: relative;
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background:
        linear-gradient(105deg, rgba(255,255,255,.075), rgba(255,255,255,.012) 54%),
        radial-gradient(circle at 82% 44%, rgba(255,39,75,.20), transparent 22rem),
        #0a0c11;
    box-shadow: var(--xai-shadow), 0 0 0 1px rgba(255,39,75,.055);
}
.xai-pro-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, transparent 12%, #000 56%, #000);
    pointer-events: none;
}
.xai-pro-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--xai-red) 35%, transparent 82%);
    box-shadow: 0 0 18px rgba(255,39,75,.75);
}
.xai-pro-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 5vw, 58px);
}
.xai-pro-kicker,
.xai-section-eyebrow {
    color: var(--xai-red);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.xai-pro-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.xai-pro-kicker span { width: 34px; height: 1px; background: var(--xai-red); box-shadow: 0 0 10px rgba(255,39,75,.8); }
.xai-pro-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #fff !important;
    font-size: clamp(21px, 7vw, 27px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-transform: none;
}
.xai-pro-hero h1 span,
.xai-pro-hero h1 label { color: #fff; }
.xai-pro-hero p { max-width: 660px; margin: 15px 0 0; color: #aab0bc; font-size: 15px; }
.xai-member-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.xai-member-meta > div {
    min-width: 138px;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.095);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}
.xai-member-meta span,
.xai-member-meta strong { display: block; }
    .xai-member-meta span {
        color: #d5deef;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
.xai-member-meta strong { margin-top: 4px; color: #f2f4f8; font-size: 13px; }
.xai-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.xai-status-badge {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    color: #9ae7ca;
    border: 1px solid rgba(64,224,167,.25);
    border-radius: 999px;
    background: rgba(64,224,167,.08);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.xai-status-badge i { font-size: 10px; }
.xai-status-badge--rank { color: #ff8fa2; border-color: rgba(255,39,75,.30); background: rgba(255,39,75,.10); }

.xai-pro-hero__visual { position: relative; z-index: 1; min-height: 360px; }
.xai-pro-hero__visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,39,75,.16), transparent 64%);
    transform: translate(-50%,-50%);
    filter: blur(2px);
}
.xai-crypto-core {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 47%;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,39,75,.15));
    box-shadow: inset 0 0 0 10px rgba(255,255,255,.025), 0 0 70px rgba(255,39,75,.30);
    transform: translate(-50%,-50%) rotate(45deg);
    backdrop-filter: blur(12px);
}
.xai-crypto-core img { width: 62px; height: 62px; object-fit: contain; transform: rotate(-45deg); filter: drop-shadow(0 0 15px rgba(255,39,75,.35)); }
.xai-orbit {
    position: absolute;
    left: 50%;
    top: 47%;
    border: 1px solid rgba(220,224,233,.19);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}
.xai-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--xai-red); box-shadow: 0 0 13px rgba(255,39,75,.8); }
.xai-orbit--one { width: 190px; height: 190px; animation: xaiOrbit 14s linear infinite; }
.xai-orbit--one::after { left: 20px; top: 30px; }
.xai-orbit--two { width: 272px; height: 142px; animation: xaiOrbitReverse 18s linear infinite; }
.xai-orbit--two::after { right: 22px; top: 18px; }
.xai-orbit--three { width: 330px; height: 250px; border-color: rgba(255,39,75,.12); animation: xaiOrbit 24s linear infinite; }
.xai-orbit--three::after { left: 72px; bottom: 12px; width: 6px; height: 6px; }
@keyframes xaiOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes xaiOrbitReverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
.xai-node { position: absolute; z-index: 3; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; background: rgba(255,255,255,.08); box-shadow: 0 0 18px rgba(255,39,75,.14); transform: rotate(45deg); }
.xai-node--1 { left: 20%; top: 28%; }
.xai-node--2 { right: 17%; top: 25%; width: 25px; height: 25px; }
.xai-node--3 { left: 23%; bottom: 19%; width: 22px; height: 22px; }
.xai-node--4 { right: 20%; bottom: 20%; }
.xai-chain-label {
    position: absolute;
    left: 50%;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    color: #8d94a0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(4,5,8,.66);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    transform: translateX(-50%);
    white-space: nowrap;
}
.xai-chain-label strong { color: #fff; }

.xai-news-strip {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--xai-border-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}
.xai-news-label { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 0 15px; color: #fff; background: linear-gradient(135deg, var(--xai-red), var(--xai-red-dark)); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.xai-news-strip .TickerNews { border: 0 !important; border-radius: 0; background: transparent !important; }
.xai-news-strip .ti_news a { color: #d9dce4 !important; font-size: 12px; }

.xai-dashboard-section {
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 20px 54px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
}
.xai-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.xai-section-heading h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 31px); letter-spacing: -.035em; }
.xai-section-heading--compact { margin-bottom: 14px; }
.xai-rate-chip,
.xai-section-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    color: #b7bdc8;
    border: 1px solid var(--xai-border-soft);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}
.xai-rate-chip i,
.xai-section-action i { color: var(--xai-red); }
.xai-section-action:hover { color: #fff; border-color: rgba(255,39,75,.40); background: rgba(255,39,75,.08); }

.xai-portfolio-grid { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 16px; }
.xai-total-card,
.xai-wallet-card,
.xai-income-card,
.xai-credit-card,
.xai-quick-actions,
.xai-network-card {
    border: 1px solid rgba(255,255,255,.105);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.xai-total-card { position: relative; overflow: hidden; min-height: 260px; padding: 22px; border-radius: 18px; }
.xai-total-card::after { content: ""; position: absolute; right: -70px; top: -80px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,39,75,.13); filter: blur(25px); pointer-events: none; }
.xai-card-topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xai-card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    color: #fff;
    border: 1px solid rgba(255,84,111,.44);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255,39,75,.22), rgba(255,255,255,.045));
    box-shadow: 0 0 22px rgba(255,39,75,.11);
}
.xai-live-pill { display: inline-flex; align-items: center; gap: 7px; color: #aeb4c0; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.xai-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--xai-success); box-shadow: 0 0 10px rgba(64,224,167,.8); }
.xai-metric-label { position: relative; z-index: 2; display: block; margin-top: 24px; color: #8f96a3; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.xai-total-value { position: relative; z-index: 2; display: block; margin-top: 6px; color: #fff; font-size: clamp(32px, 4.5vw, 48px); line-height: 1; letter-spacing: -.04em; }
.xai-mini-chart { height: 55px; display: flex; align-items: flex-end; gap: 5px; margin: 17px 0 14px; }
.xai-mini-chart i { flex: 1; min-width: 5px; border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, rgba(255,65,96,.95), rgba(255,39,75,.08)); box-shadow: 0 0 10px rgba(255,39,75,.08); }
.xai-mini-chart i:nth-child(1) { height: 20%; } .xai-mini-chart i:nth-child(2) { height: 32%; } .xai-mini-chart i:nth-child(3) { height: 27%; } .xai-mini-chart i:nth-child(4) { height: 51%; } .xai-mini-chart i:nth-child(5) { height: 44%; } .xai-mini-chart i:nth-child(6) { height: 70%; } .xai-mini-chart i:nth-child(7) { height: 61%; } .xai-mini-chart i:nth-child(8) { height: 92%; }
.xai-card-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: #bec3cc; font-size: 11px; font-weight: 750; }
.xai-card-link i { color: var(--xai-red); }
.xai-wallet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.xai-wallet-card { min-height: 124px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 17px; border-radius: 16px; transition: .2s ease; }
.xai-wallet-card:hover { color: #fff; border-color: rgba(255,39,75,.40); background: linear-gradient(145deg, rgba(255,39,75,.10), rgba(255,255,255,.02)); box-shadow: 0 18px 36px rgba(0,0,0,.20), 0 0 28px rgba(255,39,75,.07); transform: translateY(-2px); }
.xai-wallet-card div > span,
.xai-wallet-card div > strong { display: block; }
.xai-wallet-card div > span { color: #8f96a3; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.xai-wallet-card div > strong { margin-top: 5px; color: #fff; font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -.025em; }
.xai-wallet-action { color: #69707d; font-size: 12px; }

.xai-income-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.xai-income-card { position: relative; min-height: 178px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px; overflow: hidden; border-radius: 16px; transition: .2s ease; }
.xai-income-card::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,39,75,.07); filter: blur(12px); }
.xai-income-card:hover { color: #fff; border-color: rgba(255,39,75,.42); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.25), 0 0 26px rgba(255,39,75,.07); }
.xai-income-card > span:not(.xai-card-icon) { margin-top: 15px; color: #979eaa; font-size: 10px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.xai-income-card > strong { position: relative; z-index: 2; margin-top: 5px; color: #fff; font-size: clamp(21px, 2.5vw, 29px); letter-spacing: -.035em; }
.xai-income-card > small { position: relative; z-index: 2; margin-top: auto; color: #6f7683 !important; font-size: 10px; }
.xai-income-card--accent { border-color: rgba(255,39,75,.34); background: linear-gradient(145deg, rgba(255,39,75,.12), rgba(255,255,255,.018)); }

.xai-dashboard-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 16px; }
.xai-credit-card { position: relative; min-height: 286px; display: grid; grid-template-columns: minmax(0,1fr) 220px; overflow: hidden; padding: 24px; border-radius: 18px; }
.xai-credit-card__copy { position: relative; z-index: 2; }
.xai-credit-card h2 { margin: 4px 0 0; }
.xai-credit-card__copy > strong { display: block; margin-top: 14px; color: #fff; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.045em; }
.xai-credit-card p { max-width: 490px; margin: 10px 0 20px; color: #9299a6; font-size: 13px; }
.xai-primary-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    color: #fff !important;
    border: 1px solid rgba(255,84,111,.70);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--xai-red), var(--xai-red-dark));
    box-shadow: 0 12px 28px rgba(183,11,42,.24);
    font-size: 11px;
    font-weight: 850;
}
.xai-primary-action:hover { color: #fff; box-shadow: 0 16px 34px rgba(255,39,75,.30); transform: translateY(-1px); }
.xai-credit-visual { position: relative; min-height: 220px; }
.xai-credit-cube { position: absolute; z-index: 2; left: 50%; top: 48%; width: 110px; height: 110px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.30); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,39,75,.14)); box-shadow: inset 0 0 0 9px rgba(255,255,255,.02), 0 0 60px rgba(255,39,75,.24); transform: translate(-50%,-50%) rotate(45deg); }
.xai-credit-cube i { font-size: 38px; color: var(--xai-red); transform: rotate(-45deg); }
.xai-credit-visual > span { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; left: 50%; top: 48%; transform: translate(-50%,-50%); }
.xai-credit-visual > span:nth-child(2) { width: 158px; height: 158px; }
.xai-credit-visual > span:nth-child(3) { width: 205px; height: 115px; border-color: rgba(255,39,75,.17); }
.xai-credit-visual > span:nth-child(4) { width: 220px; height: 220px; opacity: .5; }
.xai-quick-actions { padding: 20px; border-radius: 18px; }
.xai-action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.xai-action-grid a { min-height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; color: #c8ccd4; border: 1px solid rgba(255,255,255,.085); border-radius: 13px; background: rgba(255,255,255,.028); font-size: 10px; font-weight: 750; text-align: center; transition: .2s ease; }
.xai-action-grid a i { color: var(--xai-red); font-size: 19px; }
.xai-action-grid a:hover { color: #fff; border-color: rgba(255,39,75,.38); background: rgba(255,39,75,.075); transform: translateY(-2px); }

.xai-network-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.xai-network-card { min-height: 112px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; padding: 17px; border-radius: 16px; transition: .2s ease; }
a.xai-network-card:hover { color: #fff; border-color: rgba(255,39,75,.40); background: linear-gradient(145deg, rgba(255,39,75,.09), rgba(255,255,255,.02)); transform: translateY(-2px); }
.xai-network-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,39,75,.34); border-radius: 14px; background: rgba(255,39,75,.10); }
.xai-network-card div > span,
.xai-network-card div > strong { display: block; }
.xai-network-card div > span { color: #8d94a0; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.xai-network-card div > strong { margin-top: 5px; color: #fff; font-size: clamp(18px, 2vw, 24px); line-height: 1.15; letter-spacing: -.025em; }

/* Popup panel must use viewport positioning even when AjaxControlToolkit writes inline values. */
.xai-slide-popup[style] { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; }

@media (max-width: 1199.98px) {
    .xai-income-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .xai-dashboard-split { grid-template-columns: 1fr; }
    .xai-quick-actions .xai-action-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
    .xai-pro-hero { grid-template-columns: minmax(0,1fr) 300px; min-height: 330px; }
    .xai-pro-hero__visual { min-height: 330px; }
    .xai-portfolio-grid { grid-template-columns: 1fr; }
    .xai-total-card { min-height: 220px; }
    .xai-income-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .xai-network-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    .xai-dashboard-shell { gap: 14px; }
    .xai-pro-hero { grid-template-columns: 1fr; min-height: auto; }
    .xai-pro-hero__content { padding: 24px 18px 12px; }
    .xai-pro-hero h1 {
        font-size: clamp(21px, 7vw, 27px);
    }
    .xai-pro-hero__visual { min-height: 230px; }
    .xai-crypto-core { width: 88px; height: 88px; border-radius: 23px; }
    .xai-crypto-core img { width: 50px; height: 50px; }
    .xai-orbit--one { width: 155px; height: 155px; }
    .xai-orbit--two { width: 220px; height: 118px; }
    .xai-orbit--three { width: 270px; height: 200px; }
    .xai-member-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .xai-member-meta > div { min-width: 0; }
    .xai-member-meta > div:first-child { grid-column: span 2; }
    .xai-news-strip { grid-template-columns: 1fr; }
    .xai-news-label { min-height: 36px; }
    .xai-dashboard-section { padding: 16px 13px; border-radius: 18px; }
    .xai-section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 15px; }
    .xai-section-action, .xai-rate-chip { width: 100%; justify-content: space-between; }
    .xai-wallet-grid { grid-template-columns: 1fr; }
    .xai-wallet-card { min-height: 100px; }
    .xai-income-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .xai-income-card { min-height: 158px; padding: 13px; }
    .xai-income-card .xai-card-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .xai-credit-card { grid-template-columns: 1fr; min-height: auto; padding: 19px; }
    .xai-credit-visual { min-height: 190px; }
    .xai-quick-actions .xai-action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .xai-network-grid { grid-template-columns: 1fr; gap: 9px; }
    .xai-network-card { min-height: 94px; }
}

@media (max-width: 479.98px) {
    .xai-income-grid { grid-template-columns: 1fr 1fr; }
    .xai-income-card > strong { font-size: 19px; }
    .xai-income-card > small { display: none; }
    .xai-action-grid a { min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .xai-orbit,
    .xai-page-ready,
    .xai-income-card,
    .xai-wallet-card,
    .xai-network-card { animation: none !important; transition: none !important; }
}

/* ========================================================================== 
   XAI MEMBER EXPERIENCE V2 — transactional, account and rewards pages
   ========================================================================== */
.xai-page-shell {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 6px 0 36px;
    color: #f5f6f9;
}
.xai-page-shell *, .xai-page-shell *::before, .xai-page-shell *::after { box-sizing: border-box; }
.xai-page-shell em { color: var(--xai-red); font-style: normal; }
.xai-hidden-fields { display: none !important; }

.xai-page-hero {
    position: relative;
    min-height: 238px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(250px, 340px);
    align-items: center;
    gap: 30px;
    margin-bottom: 24px;
    padding: clamp(25px,4vw,48px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 26px;
    background:
        linear-gradient(110deg, rgba(255,255,255,.075), rgba(255,255,255,.015) 45%, transparent 74%),
        radial-gradient(circle at 78% 30%, rgba(255,35,73,.22), transparent 23rem),
        #090b10;
    box-shadow: 0 28px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
    isolation: isolate;
}
.xai-page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .28;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
}
.xai-page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -60px;
    bottom: -110px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(255,45,78,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(255,45,78,.035), 0 0 0 92px rgba(255,45,78,.018);
}
.xai-page-hero__copy { position: relative; z-index: 1; max-width: 760px; }
.xai-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #ff4666;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.xai-page-kicker i { font-size: 11px; }
.xai-page-hero h1, .xai-reward-hero h1, .xai-account-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 860;
    line-height: 1.02;
    letter-spacing: -.045em;
}
.xai-page-hero__copy > p, .xai-reward-hero__copy > p, .xai-account-copy > p {
    max-width: 680px;
    margin: 0;
    color: #aeb4c0;
    font-size: clamp(14px,1.6vw,17px);
    line-height: 1.7;
}
.xai-page-hero__metric {
    position: relative;
    z-index: 2;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    border: 1px solid rgba(255,73,103,.32);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
        rgba(7,8,12,.78);
    box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 40px rgba(255,35,73,.08);
    backdrop-filter: blur(14px);
}
.xai-page-hero__metric > span { color: #969daa; font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.xai-page-hero__metric > strong { display: block; margin: 9px 0 13px; color: #fff; font-size: clamp(27px,3.2vw,40px); font-weight: 850; line-height: 1; overflow-wrap: anywhere; }
.xai-page-hero__metric > small { display: inline-flex; align-items: center; gap: 7px; color: #c6cad2; font-size: 11px; }
.xai-page-hero__metric > small i { color: var(--xai-red); }

.xai-page-hero--deposit { background-color: #080a0e; }
.xai-page-hero--withdraw { background-image: linear-gradient(110deg,rgba(255,255,255,.07),transparent 58%), radial-gradient(circle at 80% 28%,rgba(255,35,73,.24),transparent 21rem), linear-gradient(145deg,#090a0e,#07080b); }
.xai-page-hero--invest { background-image: linear-gradient(110deg,rgba(255,255,255,.07),transparent 58%), radial-gradient(circle at 80% 28%,rgba(255,35,73,.22),transparent 21rem), linear-gradient(145deg,#090a0e,#07080b); }
.xai-page-hero--p2p { background-image: linear-gradient(110deg,rgba(255,255,255,.07),transparent 58%), radial-gradient(circle at 80% 28%,rgba(255,35,73,.23),transparent 21rem), linear-gradient(145deg,#090a0e,#07080b); }
.xai-page-hero--history { background-image: linear-gradient(110deg,rgba(255,255,255,.07),transparent 58%), radial-gradient(circle at 80% 28%,rgba(255,35,73,.18),transparent 21rem), linear-gradient(145deg,#090a0e,#07080b); }

.xai-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr);
    align-items: start;
    gap: 22px;
    margin-bottom: 24px;
}
.xai-workspace-grid--profile { grid-template-columns: minmax(0,1.65fr) minmax(280px,.62fr); }
.xai-side-stack { display: grid; gap: 18px; }

.xai-form-card, .xai-data-card, .xai-menu-section, .xai-referral-card, .xai-process-card, .xai-package-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 42%),
        rgba(10,12,17,.93);
    box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
.xai-form-card { padding: clamp(19px,3vw,30px); }
.xai-data-card { margin-top: 22px; padding: clamp(18px,2.5vw,26px); }
.xai-form-card::before, .xai-data-card::before, .xai-menu-section::before, .xai-referral-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 9%;
    width: 82%;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,49,85,.8),transparent);
    box-shadow: 0 0 18px rgba(255,35,73,.35);
}

.xai-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}
.xai-card-heading__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    color: #fff;
    border: 1px solid rgba(255,69,100,.4);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(255,55,89,.25),rgba(255,55,89,.07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(255,35,73,.08);
}
.xai-card-heading__icon i { font-size: 17px; }
.xai-card-heading > div:nth-child(2) { min-width: 0; }
.xai-card-heading > div:nth-child(2) > span { display: block; margin-bottom: 2px; color: #8e95a3; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.xai-card-heading h2 { margin: 0; color: #fff; font-size: clamp(18px,2.2vw,24px); font-weight: 820; letter-spacing: -.025em; }
.xai-secure-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 10px;
    color: #dfe2e8;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    font-size: 10px;
    font-weight: 780;
    white-space: nowrap;
}
.xai-secure-chip i { width: 7px; height: 7px; border-radius: 50%; background: #ff2c52; box-shadow: 0 0 12px rgba(255,44,82,.85); }

.xai-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.xai-field { min-width: 0; }
.xai-field--full { grid-column: 1 / -1; }
.xai-field > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #e3e6ec;
    font-size: 12px;
    font-weight: 720;
}
.xai-field > label span { color: #8c93a0; font-size: 9px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.xai-page-shell .form-control,
.xai-page-shell input[type=text],
.xai-page-shell input[type=password],
.xai-page-shell input[type=email],
.xai-page-shell input[type=number],
.xai-page-shell input[type=date],
.xai-page-shell select,
.xai-page-shell textarea {
    min-height: 50px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 13px !important;
    background: rgba(2,4,8,.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    font-size: 13px !important;
}
.xai-page-shell .form-control:focus,
.xai-page-shell input:focus,
.xai-page-shell select:focus,
.xai-page-shell textarea:focus {
    border-color: rgba(255,49,84,.78) !important;
    background: rgba(8,10,15,.9) !important;
    box-shadow: 0 0 0 3px rgba(255,35,73,.12), 0 0 28px rgba(255,35,73,.08) !important;
}
.xai-page-shell .form-control[readonly], .xai-page-shell input[readonly] { color: #c7cbd3 !important; background: rgba(255,255,255,.035) !important; }
.xai-input-icon, .xai-address-field { position: relative; }
.xai-input-icon > i, .xai-address-field > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;
    color: #8c93a0;
    font-size: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}
.xai-input-icon .form-control, .xai-address-field .form-control { padding-left: 43px !important; }
.xai-address-field > span {
    position: absolute;
    top: 50%;
    right: 11px;
    padding: 5px 8px;
    color: #ff6b84;
    border: 1px solid rgba(255,57,89,.28);
    border-radius: 999px;
    background: rgba(255,35,73,.08);
    font-size: 9px;
    font-weight: 800;
    transform: translateY(-50%);
}
.xai-address-field .form-control { padding-right: 90px !important; }
.xai-amount-input {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    min-height: 56px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    background: rgba(2,4,8,.72);
}
.xai-amount-input:focus-within { border-color: rgba(255,49,84,.78); box-shadow: 0 0 0 3px rgba(255,35,73,.12); }
.xai-amount-input > span { display: grid; place-items: center; height: 100%; color: #ff4766; border-right: 1px solid rgba(255,255,255,.09); font-size: 19px; font-weight: 800; }
.xai-amount-input > b { padding: 0 14px; color: #949ba8; font-size: 10px; letter-spacing: .08em; }
.xai-amount-input .form-control { min-height: 54px !important; padding-left: 13px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 18px !important; font-weight: 800 !important; }
.xai-amount-input--readonly { background: rgba(255,255,255,.035); }
.xai-amount-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.xai-amount-presets button {
    width: auto !important;
    min-width: 60px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    color: #e4e7ec !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.045) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}
.xai-amount-presets button:hover { color: #fff !important; border-color: rgba(255,58,91,.55) !important; background: rgba(255,35,73,.11) !important; }
.xai-field-help { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; color: #8f96a4; font-size: 10px; line-height: 1.5; }
.xai-field-help i { margin-top: 2px; color: #ff3f61; }
.xai-inline-result { min-height: 22px; display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #cdd1d9; font-size: 11px; }
.xai-inline-result i { color: #ff3a5e; }
.xai-balance-inline {
    min-height: 58px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid rgba(255,72,101,.25);
    border-radius: 14px;
    background: linear-gradient(90deg,rgba(255,35,73,.09),rgba(255,255,255,.025));
}
.xai-balance-inline i { color: #ff3d61; }
.xai-balance-inline strong { color: #fff; font-size: 20px; }
.xai-balance-inline span { color: #969daa; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.xai-subsection-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0 18px;
    padding-top: 23px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.xai-subsection-title > i { color: #ff3c5f; }
.xai-subsection-title span { color: #8e95a3; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.xai-subsection-title h3 { margin: 2px 0 0; color: #fff; font-size: 18px; }

.xai-primary-button, input.xai-primary-button, button.xai-primary-button,
.xai-secondary-button, input.xai-secondary-button, button.xai-secondary-button,
.xai-outline-button, .xai-copy-button {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.xai-primary-button, input.xai-primary-button, button.xai-primary-button {
    color: #fff !important;
    border: 1px solid rgba(255,90,115,.72) !important;
    background: linear-gradient(135deg,#ff294f,#aa0829) !important;
    box-shadow: 0 12px 30px rgba(170,8,41,.25) !important;
}
.xai-primary-button:hover { color: #fff !important; box-shadow: 0 16px 38px rgba(255,35,73,.3) !important; transform: translateY(-1px); }
.xai-primary-button--wide { width: 100% !important; justify-content: space-between !important; margin-top: 20px !important; }
.xai-secondary-button, input.xai-secondary-button, button.xai-secondary-button, .xai-outline-button {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.05) !important;
    box-shadow: none !important;
}
.xai-secondary-button:hover, .xai-outline-button:hover { color: #fff !important; border-color: rgba(255,55,88,.45) !important; background: rgba(255,35,73,.08) !important; }
.xai-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.xai-form-message { margin-top: 10px; color: #cbd0d8; font-size: 12px; }
.xai-form-message--error, .xai-form-message--error * { color: #ff6b82 !important; }
.xai-form-message--success, .xai-form-message--success * { color: #75e8bd !important; }

.xai-address-warning {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(255,61,94,.22);
    border-radius: 14px;
    background: rgba(255,35,73,.065);
}
.xai-address-warning > i { color: #ff3d60; }
.xai-address-warning strong { display: block; margin-bottom: 2px; color: #fff; font-size: 12px; }
.xai-address-warning span { color: #a5abb7; font-size: 10px; line-height: 1.5; }
.xai-address-warning a { color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; }

.xai-info-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),rgba(10,12,17,.94);
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.xai-info-card--accent { border-color: rgba(255,56,89,.24); background: linear-gradient(145deg,rgba(255,35,73,.11),rgba(255,255,255,.02)),rgba(10,12,17,.94); }
.xai-info-card__icon { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,75,104,.34); border-radius: 13px; background: rgba(255,35,73,.1); }
.xai-info-card > div > span, .xai-process-card > span, .xai-package-preview > span { color: #ff4666; font-size: 9px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.xai-info-card h3 { margin: 4px 0 6px; color: #fff; font-size: 17px; }
.xai-info-card p { margin: 0; color: #959caa; font-size: 11px; line-height: 1.65; }
.xai-process-card, .xai-package-preview { padding: 21px; }
.xai-process-card ol { display: grid; gap: 15px; margin: 17px 0 0; padding: 0; list-style: none; }
.xai-process-card ol li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.xai-process-card ol li > b { width: 34px; height: 34px; display: grid; place-items: center; color: #ff4968; border: 1px solid rgba(255,64,96,.28); border-radius: 11px; background: rgba(255,35,73,.07); font-size: 10px; }
.xai-process-card ol strong { display: block; color: #e9ebef; font-size: 12px; }
.xai-process-card ol small { display: block; margin-top: 2px; color: #858d9c; font-size: 9px; line-height: 1.5; }
.xai-check-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.xai-check-list li { display: flex; align-items: flex-start; gap: 9px; color: #cbd0d8; font-size: 11px; line-height: 1.45; }
.xai-check-list i { margin-top: 2px; color: #ff3f61; }
.xai-network-card-v2 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(10,12,17,.92); }
.xai-network-symbol { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(135deg,#ff294f,#9f0725); }
.xai-network-card-v2 span { color: #858c99; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.xai-network-card-v2 strong { display: block; margin: 2px 0; color: #fff; font-size: 13px; }
.xai-network-card-v2 small { color: #858c99; font-size: 9px; }
.xai-network-card-v2 .xai-live-dot { color: #ff6a83; border: 1px solid rgba(255,45,79,.25); border-radius: 999px; padding: 5px 7px; background: rgba(255,35,73,.07); }
.xai-package-preview { display: grid; gap: 11px; }
.xai-package-preview > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.025); }
.xai-package-preview > div i { grid-row: 1 / span 2; align-self: center; color: #ff3f61; }
.xai-package-preview > div strong { color: #fff; font-size: 12px; }
.xai-package-preview > div small { color: #858d9a; font-size: 9px; }

.xai-filter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 14px; }
.xai-filter-actions { display: flex; gap: 8px; }
.xai-data-card .xai-table-wrap { border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(2,4,8,.35); }
.xai-data-table { min-width: 720px !important; }
.xai-data-table th { padding: 14px 13px !important; color: #b9bec8 !important; background: rgba(255,255,255,.035) !important; border-color: rgba(255,255,255,.08) !important; font-size: 10px !important; letter-spacing: .1em !important; }
.xai-data-table td { padding: 14px 13px !important; color: #d8dbe2 !important; background: rgba(255,255,255,.012) !important; border-color: rgba(255,255,255,.065) !important; font-size: 11px !important; }
.xai-data-table tr:hover td { background: rgba(255,35,73,.045) !important; }
.xai-table-status { display: inline-flex; min-height: 26px; align-items: center; padding: 5px 9px; color: #fff; border: 1px solid rgba(255,61,94,.28); border-radius: 999px; background: rgba(255,35,73,.08); font-size: 9px; font-weight: 780; }

/* Account menu */
.xai-account-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: clamp(22px,3vw,34px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 24px;
    background: radial-gradient(circle at 86% 16%,rgba(255,35,73,.2),transparent 21rem),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),#090b10;
    box-shadow: 0 26px 64px rgba(0,0,0,.3);
}
.xai-account-avatar { position: relative; width: 76px; height: 76px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,70,100,.48); border-radius: 22px; background: linear-gradient(145deg,#ff3156,#9d0624); box-shadow: 0 14px 34px rgba(157,6,36,.28); font-size: 27px; }
.xai-account-avatar span { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border: 3px solid #090b10; border-radius: 50%; background: #58dfad; }
.xai-account-copy h1 { margin-bottom: 6px; font-size: clamp(27px,4vw,43px); }
.xai-account-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.xai-account-status, .xai-account-rank, .xai-account-badges .tag-xs { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px !important; color: #fff !important; border: 1px solid rgba(255,64,96,.3) !important; border-radius: 999px !important; background: rgba(255,35,73,.09) !important; font-size: 9px !important; font-weight: 800 !important; text-decoration: none !important; }
.xai-referral-card { margin-bottom: 22px; padding: 22px; }
.xai-referral-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.xai-referral-value { min-height: 49px; display: flex; align-items: center; padding: 12px 14px; overflow: hidden; color: #d9dde4; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(2,4,8,.58); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.xai-copy-button { color: #fff !important; border: 1px solid rgba(255,69,100,.45) !important; background: rgba(255,35,73,.1) !important; }
.xai-account-sections { display: grid; gap: 22px; }
.xai-menu-section { padding: 23px; }
.xai-menu-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.xai-menu-grid > a { min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 78px; padding: 14px; color: #fff; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.025); text-decoration: none; transition: .2s ease; }
.xai-menu-grid > a:hover { color: #fff; border-color: rgba(255,55,88,.38); background: rgba(255,35,73,.06); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.xai-menu-grid > a > span { width: 42px; height: 42px; display: grid; place-items: center; color: #ff4867; border: 1px solid rgba(255,67,98,.24); border-radius: 13px; background: rgba(255,35,73,.065); }
.xai-menu-grid strong { display: block; color: #fff; font-size: 13px; }
.xai-menu-grid small { display: block; margin-top: 3px; color: #858d9b; font-size: 9px; }
.xai-menu-grid > a > i { color: #6f7785; font-size: 10px; }
.xai-menu-danger > span { color: #ff6b82 !important; }

/* Profile */
.xai-profile-avatar { width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid rgba(255,66,98,.36); border-radius: 22px; background: linear-gradient(145deg,rgba(255,35,73,.16),rgba(255,255,255,.04)); }
.xai-profile-avatar img { width: 48px; height: 48px; object-fit: contain; }
.xai-page-hero--profile { grid-template-columns: auto 1fr auto; }
.xai-security-score { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.035); }
.xai-security-score > i { color: #ff3e61; font-size: 20px; }
.xai-security-score span { display: block; color: #858d9a; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.xai-security-score strong { display: block; margin-top: 2px; color: #fff; font-size: 12px; }

/* Rewards */
.xai-reward-hero {
    position: relative;
    min-height: 330px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,430px);
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: clamp(28px,4vw,52px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 27px;
    background: radial-gradient(circle at 77% 47%,rgba(255,35,73,.24),transparent 22rem),linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.012)),#080a0e;
    box-shadow: 0 28px 72px rgba(0,0,0,.32);
}
.xai-reward-hero__copy { position: relative; z-index: 2; }
.xai-reward-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.xai-reward-pills span { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px; color: #d6dae2; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); font-size: 10px; }
.xai-reward-pills i { color: #ff3f61; }
.xai-reward-orbit { position: relative; width: min(100%,350px); aspect-ratio: 1; margin: auto; border: 1px solid rgba(255,61,94,.21); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,35,73,.025),0 0 70px rgba(255,35,73,.15); }
.xai-reward-orbit::before, .xai-reward-orbit::after { content:""; position:absolute; inset:17%; border:1px solid rgba(255,255,255,.14); border-radius:50%; transform:rotate(48deg); }
.xai-reward-orbit::after { inset:31%; border-color:rgba(255,48,81,.35); transform:rotate(-25deg); }
.xai-reward-orbit > div { position:absolute; z-index:3; inset:34%; display:grid; place-items:center; color:#fff; border:1px solid rgba(255,83,110,.52); border-radius:50%; background:radial-gradient(circle at 36% 30%,#ff3b5f,#92051f 72%); box-shadow:0 0 50px rgba(255,35,73,.35); font-size:38px; }
.xai-reward-orbit > span { position:absolute; width:13px; height:13px; border:2px solid rgba(255,255,255,.34); border-radius:50%; background:#ff3156; box-shadow:0 0 18px rgba(255,35,73,.75); }
.xai-reward-orbit > span:nth-child(1){top:8%;left:48%;}.xai-reward-orbit > span:nth-child(2){right:7%;top:49%;}.xai-reward-orbit > span:nth-child(3){left:13%;bottom:15%;}
.xai-reward-table .is-achieved td { background: linear-gradient(90deg,rgba(255,35,73,.07),rgba(255,255,255,.015)) !important; }
.xai-rank-index { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.045); }
.xai-rank-name { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.xai-rank-name > i { grid-row: 1 / span 2; color: #ff3f61; }
.xai-rank-name strong { color: #fff; font-size: 12px; }
.xai-rank-name span { color: #858d9b; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.xai-progress-value, .xai-reward-value, .xai-points-value { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 6px 9px; color: #d6dae1; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.03); font-size: 10px; font-weight: 760; white-space: nowrap; }
.xai-progress-value i, .xai-points-value i { color: #ff4465; }
.xai-progress-value.is-complete, .xai-reward-value.is-complete, .xai-points-value.is-complete { color: #fff; border-color: rgba(255,61,94,.36); background: rgba(255,35,73,.1); }
.xai-reward-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 18px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.025); }
.xai-reward-note > i { color: #ff3f61; }
.xai-reward-note strong { display: block; color: #fff; font-size: 12px; }
.xai-reward-note span { display: block; margin-top: 3px; color: #878f9d; font-size: 10px; line-height: 1.5; }

/* Hard override any legacy blue styles inside redesigned pages. */
.xai-page-shell .text-primary, .xai-page-shell .text-info, .xai-page-shell [style*="#168bff"], .xai-page-shell [style*="#0d6efd"] { color: var(--xai-red) !important; }
.xai-page-shell .bg-primary, .xai-page-shell .bg-info, .xai-page-shell .bg-gradient-primary, .xai-page-shell .btn-primary, .xai-page-shell .btn-info {
    color: #fff !important;
    border-color: rgba(255,76,105,.55) !important;
    background: linear-gradient(135deg,#ff294f,#a50827) !important;
}

@media (max-width: 1100px) {
    .xai-workspace-grid, .xai-workspace-grid--profile { grid-template-columns: minmax(0,1fr) minmax(260px,.7fr); }
    .xai-filter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .xai-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .xai-page-hero, .xai-reward-hero { grid-template-columns: 1fr; min-height: 0; }
    .xai-page-hero__metric { max-width: 440px; }
    .xai-page-hero--profile { grid-template-columns: auto 1fr; }
    .xai-page-hero--profile .xai-security-score { grid-column: 1 / -1; }
    .xai-workspace-grid, .xai-workspace-grid--profile { grid-template-columns: 1fr; }
    .xai-side-stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .xai-side-stack > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .xai-reward-orbit { width: min(72vw,330px); }
}
@media (max-width: 767.98px) {
    .xai-page-shell { padding-bottom: 92px; }
    .xai-page-hero, .xai-reward-hero { margin-bottom: 16px; padding: 22px 18px; border-radius: 20px; }
    .xai-page-hero h1, .xai-reward-hero h1, .xai-account-hero h1 { font-size: 33px; }
    .xai-page-hero__metric { min-height: 124px; padding: 19px; border-radius: 17px; }
    .xai-page-hero__metric > strong { font-size: 28px; }
    .xai-form-card, .xai-data-card, .xai-menu-section, .xai-referral-card { padding: 17px; border-radius: 18px; }
    .xai-form-grid { grid-template-columns: 1fr; gap: 14px; }
    .xai-field--full { grid-column: auto; }
    .xai-side-stack { grid-template-columns: 1fr; }
    .xai-side-stack > :last-child:nth-child(odd) { grid-column: auto; }
    .xai-card-heading { align-items: flex-start; margin-bottom: 19px; }
    .xai-secure-chip { display: none; }
    .xai-form-actions > input, .xai-form-actions > button, .xai-form-actions > a { flex: 1 1 140px; }
    .xai-address-warning { grid-template-columns: auto 1fr; }
    .xai-address-warning a { grid-column: 2; }
    .xai-filter-grid { grid-template-columns: 1fr; }
    .xai-filter-actions { grid-column: auto; flex-wrap: wrap; }
    .xai-filter-actions > input { flex: 1 1 100px; }
    .xai-account-hero { grid-template-columns: auto 1fr; align-items: start; padding: 20px 17px; border-radius: 20px; }
    .xai-account-hero > .xai-outline-button { grid-column: 1 / -1; width: 100%; }
    .xai-account-avatar { width: 60px; height: 60px; border-radius: 17px; font-size: 22px; }
    .xai-account-copy > p { font-size: 12px; }
    .xai-referral-row { grid-template-columns: 1fr; }
    .xai-copy-button { width: 100%; }
    .xai-menu-grid { grid-template-columns: 1fr; }
    .xai-menu-grid > a { min-height: 70px; }
    .xai-profile-avatar { width: 62px; height: 62px; border-radius: 17px; }
    .xai-page-hero--profile { grid-template-columns: auto 1fr; }
    .xai-reward-orbit { width: min(78vw,290px); }
    .xai-reward-hero { min-height: 0; }
}
@media (max-width: 420px) {
    .xai-page-hero h1, .xai-reward-hero h1, .xai-account-hero h1 { font-size: 29px; }
    .xai-page-hero { padding: 19px 15px; }
    .xai-page-hero__metric > strong { font-size: 24px; }
    .xai-form-card, .xai-data-card, .xai-menu-section, .xai-referral-card { padding: 15px; }
    .xai-card-heading__icon { width: 42px; height: 42px; flex-basis: 42px; }
    .xai-card-heading h2 { font-size: 18px; }
    .xai-amount-presets button { flex: 1 1 56px; min-width: 0 !important; }
}