/* =====================================================================================
   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; } }

/* ===================================================================================
   MOBILE: keep the page fixed to the screen width (Oct 2026)
   1. iPhone/Android zoom INTO the page when you tap a field whose text is smaller than 16px;
      after that the whole page can be dragged sideways. Fields are 16px on touch screens.
   2. Nothing may push the page wider than the screen (tickers, animations, popups, long hashes).
   3. No sideways bounce / swipe of the whole page.
   =================================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; } /* BOTH: body alone is ignored by mobile browsers */
@supports (overflow: clip) { html, body { overflow-x: clip; } main.main, .rx-guest { overflow-x: clip; } } /* clip keeps position:sticky working */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
    select, textarea, .form-control, .form-select { font-size: 16px !important; }
    .input-group-sm > .form-control, .form-control-sm, .form-select-sm { font-size: 16px !important; }
}
img, video, iframe { max-width: 100%; }
.main, .content, .container-fluid, .container { max-width: 100%; }
code, .rx-hash { overflow-wrap: anywhere; }