/* =====================================================================================
   RevelX — "Lupine Chrome" premium layer
   Palette taken from the wolf logo: abyss navy, sapphire, electric arc cyan, chrome silver.
   Loaded LAST (after revelx.css / revelx-pages.css / revelx-auth.css) so it wins.
   ===================================================================================== */

@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap; src: url('../fonts/revelx/chakra-petch-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url('../fonts/revelx/chakra-petch-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url('../fonts/revelx/chakra-petch-Bold.woff2') format('woff2'); }

:root {
    /* core palette */
    --lx-abyss: #030914;
    --lx-midnight: #0a1a36;
    --lx-sapphire: #1463ff;
    --lx-arc: #35d8ff;
    --lx-chrome: #e6edf7;
    --lx-steel: #7d90b0;
    --lx-deep: #0b3fd6;

    --lx-chrome-text: linear-gradient(180deg, #ffffff 0%, #e9f0fa 38%, #9fb3d1 52%, #dfe9f7 70%, #ffffff 100%);
    --lx-arc-grad: linear-gradient(115deg, #0b3fd6 0%, #1463ff 42%, #35d8ff 100%);
    --lx-edge: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(53, 216, 255, .18) 30%, rgba(20, 99, 255, .06) 55%, rgba(255, 255, 255, .12));

    /* map onto the existing RevelX tokens so every page follows */
    --rx-bg: var(--lx-abyss);
    --rx-bg-2: #061126;
    --rx-surface: rgba(10, 26, 54, .62);
    --rx-surface-solid: #0a1a36;
    --rx-surface-2: rgba(20, 48, 92, .42);
    --rx-surface-3: #10264a;
    --rx-border: rgba(120, 190, 255, .13);
    --rx-border-strong: rgba(120, 190, 255, .28);
    --rx-text: var(--lx-chrome);
    --rx-muted: #9fb2cf;
    --rx-faint: #6a7f9f;
    --rx-purple: #1f6bff;
    --rx-violet: #3d8bff;
    --rx-blue: var(--lx-sapphire);
    --rx-cyan: var(--lx-arc);
    --rx-grad: var(--lx-arc-grad);
    --rx-grad-soft: linear-gradient(115deg, rgba(20, 99, 255, .22) 0%, rgba(53, 216, 255, .12) 100%);
    --rx-success: #22e3a0;
    --rx-danger: #ff4d6d;
    --rx-warning: #ffc44d;
    --rx-info: var(--lx-arc);
    --rx-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 48px -28px rgba(0, 0, 0, .9);
    --rx-glow: 0 12px 34px -12px rgba(20, 99, 255, .75);
    --rx-font-display: 'Chakra Petch', 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;

    --bs-primary: #1463ff;
    --bs-primary-rgb: 20, 99, 255;
    --bs-info-rgb: 53, 216, 255;
    --bs-success-rgb: 34, 227, 160;
    --bs-danger-rgb: 255, 77, 109;
    --bs-warning-rgb: 255, 196, 77;
    --bs-link-color: #7fd9ff;
    --bs-link-hover-color: #ffffff;
}

/* ---------- canvas: abyss + two blooms + faint hex lattice ---------- */
html, body { background-color: var(--lx-abyss) !important; }
body {
    background-image:
        radial-gradient(900px 600px at 8% -8%, rgba(20, 99, 255, .30), transparent 62%),
        radial-gradient(800px 560px at 108% 12%, rgba(53, 216, 255, .14), transparent 60%),
        radial-gradient(1100px 700px at 50% 120%, rgba(11, 63, 214, .26), transparent 65%),
        linear-gradient(180deg, #030914 0%, #050f22 55%, #07152e 100%) !important;
}
body::before {
    opacity: .9 !important;
    background-image:
        radial-gradient(1px 1px at 22px 34px, rgba(230, 240, 255, .9), transparent 50%),
        radial-gradient(1px 1px at 140px 90px, rgba(160, 220, 255, .75), transparent 50%),
        radial-gradient(1.4px 1.4px at 230px 170px, rgba(53, 216, 255, .8), transparent 50%),
        radial-gradient(1px 1px at 300px 46px, rgba(255, 255, 255, .6), transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16Z M28 64v33' fill='none' stroke='%2335d8ff' stroke-opacity='.045'/%3E%3C/svg%3E") !important;
    background-size: 360px 280px, 360px 280px, 360px 280px, 360px 280px, 56px 97px !important;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}
::selection { background: rgba(20, 99, 255, .55); color: #fff; }
:focus-visible { outline: 2px solid var(--lx-arc) !important; outline-offset: 2px; }

/* ---------- typography: chrome display ---------- */
h1, h2, h3, .h1, .h2, .h3, .page-header-title, .display-4, .display-5 { font-family: var(--rx-font-display) !important; font-weight: 700; letter-spacing: .005em; }
.page-header-title, .rx-kpi-value, .rx-chrome {
    background: var(--lx-chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent !important;
    -webkit-text-fill-color: transparent;
}
.rx-grad-text {
    background: linear-gradient(100deg, #7fd9ff 0%, #35d8ff 30%, #ffffff 50%, #35d8ff 70%, #1f7bff 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent;
}
.rx-eyebrow { color: #8fdcff !important; }
a { color: #7fd9ff; }
a:hover { color: #fff; }

/* ---------- brand: wolf mark + chrome wordmark ---------- */
.rx-brand-wolf { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 0 12px rgba(53, 216, 255, .45)); }
.rx-brand-name { font-family: var(--rx-font-display) !important; font-style: italic; font-weight: 700 !important; letter-spacing: .02em !important; background: var(--lx-chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.rx-brand-name b { background: linear-gradient(180deg, #bff1ff, #35d8ff 55%, #1463ff) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; }
.rx-brand-sub { color: #6f86ab !important; }

/* ---------- glossy glass surfaces ---------- */
.card, .rx-glass {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .012) 38%, rgba(255, 255, 255, 0) 100%),
        var(--rx-surface) !important;
    border: 1px solid transparent !important;
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.card::before, .rx-glass::before { /* chrome hairline edge */
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--lx-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.card::after, .rx-glass::after { /* top gloss line */
    content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(190, 240, 255, .75), transparent);
    opacity: .55;
}
.card .card { background: rgba(8, 22, 46, .55) !important; }
.card .card::after { display: none; }
.modal-content, .dropdown-menu, .offcanvas { background: rgba(7, 19, 40, .94) !important; border: 1px solid var(--rx-border-strong) !important; backdrop-filter: blur(22px) saturate(150%); }

/* ---------- KPI chips / icons ---------- */
.rx-kpi-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px -10px rgba(20, 99, 255, .8); }
.rx-ico-purple { background: linear-gradient(140deg, rgba(20, 99, 255, .9), rgba(11, 63, 214, .9)) !important; color: #fff !important; }
.rx-ico-blue   { background: linear-gradient(140deg, rgba(53, 216, 255, .9), rgba(20, 99, 255, .85)) !important; color: #03203a !important; }
.rx-ico-pink   { background: linear-gradient(140deg, #e8eef8, #8ea3c2) !important; color: #0a1a36 !important; }
.rx-ico-green  { background: linear-gradient(140deg, #3ff0b4, #12a77a) !important; color: #03281c !important; }
.rx-ico-amber  { background: linear-gradient(140deg, #ffd66b, #f2a51c) !important; color: #2a1a00 !important; }

/* ---------- buttons: sapphire -> arc, with a light sweep on hover ---------- */
.btn-primary, .btn-soft-primary.active, .lp-btn-primary {
    background: var(--lx-arc-grad) !important; color: #fff !important; border: 0 !important;
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow: 0 10px 26px -12px rgba(20, 99, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-primary::after, .lp-btn-primary::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%);
    transform: translateX(-120%); transition: transform .6s ease;
}
.btn-primary:hover::after, .lp-btn-primary:hover::after { transform: translateX(120%); }
.btn-soft-primary { background: rgba(20, 99, 255, .16) !important; color: #9fe4ff !important; }
.btn-soft-primary:hover { background: rgba(20, 99, 255, .3) !important; color: #fff !important; }
.btn-outline-primary { border-color: rgba(53, 216, 255, .55) !important; color: #9fe4ff !important; }
.btn-info { background: linear-gradient(120deg, #1463ff, #35d8ff) !important; }
.btn-success { background: linear-gradient(120deg, #12a77a, #22e3a0) !important; color: #032419 !important; }
.btn-danger { background: linear-gradient(120deg, #d9304f, #ff4d6d) !important; }
.btn-soft-danger { background: rgba(255, 77, 109, .14) !important; }

/* ---------- forms ---------- */
.form-control, .form-select, .input-group-text, .tom-select-custom .ts-control {
    background-color: rgba(4, 14, 32, .7) !important; border-color: var(--rx-border-strong) !important; color: var(--lx-chrome) !important;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(53, 216, 255, .7) !important; box-shadow: 0 0 0 4px rgba(20, 99, 255, .22), 0 0 22px -6px rgba(53, 216, 255, .55) !important;
}
.form-check-input:checked { background-color: var(--lx-sapphire) !important; border-color: var(--lx-sapphire) !important; }
.form-switch .form-check-input:checked { box-shadow: 0 0 12px -2px rgba(53, 216, 255, .7); }

/* ---------- sidebar ---------- */
.navbar-vertical-aside { background: linear-gradient(180deg, rgba(6, 17, 38, .97), rgba(3, 9, 20, .98)) !important; }
.navbar-vertical .nav-link.active, .navbar-vertical .nav-link[aria-expanded="true"] {
    background: linear-gradient(90deg, rgba(20, 99, 255, .32), rgba(53, 216, 255, .06)) !important;
    box-shadow: inset 2px 0 0 var(--lx-arc), inset 0 0 0 1px rgba(53, 216, 255, .16) !important;
}
.navbar-vertical .nav-link.active .nav-icon { color: var(--lx-arc) !important; filter: drop-shadow(0 0 6px rgba(53, 216, 255, .7)); }
#header.navbar { background: rgba(3, 9, 20, .72) !important; }

/* ---------- tables, badges, progress ---------- */
.table thead th, .thead-light th { background: rgba(20, 99, 255, .08) !important; color: #9fb2cf !important; border-color: var(--rx-border) !important; }
.table-hover tbody tr:hover { background: rgba(53, 216, 255, .045) !important; }
.progress { background: rgba(255, 255, 255, .06) !important; }
.progress-bar { background: var(--lx-arc-grad) !important; box-shadow: 0 0 12px rgba(53, 216, 255, .55); }
.badge.bg-primary, .badge.bg-soft-primary { background: rgba(20, 99, 255, .22) !important; color: #9fe4ff !important; }
.page-item.active .page-link { background: var(--lx-arc-grad) !important; border-color: transparent !important; }

/* ---------- one orchestrated entrance (dashboard pages) ---------- */
@keyframes lx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.main .content > .row, .main .content > .page-header, .main .content > .card { animation: lx-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.main .content > .row:nth-of-type(2) { animation-delay: .06s; }
.main .content > .row:nth-of-type(3) { animation-delay: .12s; }
.main .content > .row:nth-of-type(4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- auth pages ---------- */
.rx-auth-card .rx-auth-panel.rx-glass { background: linear-gradient(170deg, rgba(16, 38, 74, .82), rgba(6, 17, 38, .86)) !important; box-shadow: var(--rx-shadow), 0 40px 90px -40px rgba(20, 99, 255, .55) !important; }
.rx-auth-card .rx-auth-panel.rx-glass::before { left: -1px; right: -1px; top: -1px; bottom: -1px; height: auto; background: var(--lx-edge); }
.rx-auth-kicker { text-transform: none !important; letter-spacing: .01em !important; font-weight: 600 !important; }
.rx-auth-headline { font-family: var(--rx-font-display) !important; }
.lx-auth-emblem { position: absolute; right: -2%; top: 3.5%; width: min(22vw, 290px); aspect-ratio: 1; opacity: .95; }
.rx-auth-art-body { position: relative; z-index: 1; }
.lx-auth-emblem::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(20, 99, 255, .42), transparent 68%); }
.lx-auth-emblem img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 0 26px rgba(53, 216, 255, .35)); }
.lx-auth-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lx-auth-arcs .a1 { transform-origin: 50% 50%; animation: lx-spin 14s linear infinite; }
.lx-auth-arcs .a2 { transform-origin: 50% 50%; animation: lx-spin 22s linear infinite reverse; }
.lx-auth-arcs .a3 { transform-origin: 50% 50%; animation: lx-spin 9s linear infinite; }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@media (max-width: 1199.98px) { .lx-auth-emblem { width: 24vw; right: -6%; opacity: .7; } }
@media (max-width: 991.98px) { .lx-auth-emblem { display: none; } }

/* ---------- global pool dashboard band ---------- */
.rx-gp-stat { height: 100%; border-radius: 14px; padding: .8rem .9rem; background: rgba(3, 9, 20, .45); border: 1px solid var(--rx-border); }
.rx-gp-stat > span { display: block; font-size: .74rem; color: var(--rx-faint); margin-bottom: .2rem; }
.rx-gp-stat b { font-family: var(--rx-font-display); font-size: 1.15rem; color: #fff; }
@media (max-width: 575.98px) { .rx-gp-stat b { font-size: .98rem; } .rx-gp-stat { padding: .65rem .7rem; } }

/* ---------- KPI numbers: 4-decimal amounts must fit their card ---------- */
.card .display-4, .card h3.text-inherit { font-size: clamp(1.05rem, .45rem + 1.1vw, 2rem) !important; line-height: 1.15; font-family: var(--rx-font-display) !important; }
.card-body:has(> * .display-4), .card-body:has(h3.text-inherit) { container-type: inline-size; }
@container (min-width: 1px) { .card .display-4, .card h3.text-inherit { font-size: clamp(1rem, 10.5cqw, 2rem) !important; } }
.card .display-4 { background: var(--lx-chrome-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- PPX live price ---------- */
.rx-ppx-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .7rem; border-radius: 999px; font-size: .8rem; color: #e6edf7 !important; text-decoration: none; background: rgba(3, 9, 20, .35); border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; }
.rx-ppx-chip:hover { background: rgba(3, 9, 20, .55); }
.rx-ppx-chip b { font-family: var(--rx-font-display); font-weight: 700; color: #fff; }
.rx-ppx-dot { width: 7px; height: 7px; border-radius: 50%; background: #22e3a0; box-shadow: 0 0 0 0 rgba(34, 227, 160, .7); animation: lx-ping 1.8s infinite; }
@keyframes lx-ping { 70% { box-shadow: 0 0 0 8px rgba(34, 227, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 227, 160, 0); } }
.rx-up { color: #22e3a0 !important; font-weight: 600; } .rx-down { color: #ff6b85 !important; font-weight: 600; }
.rx-ppx-usd { font-size: .8rem; color: rgba(230, 237, 247, .78); margin-top: .1rem; }
.rx-ppx-band .rx-gp-stat b { font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .rx-ppx-dot { animation: none; } }