/*
 * SOLEX calculator motion layer.
 * Visual-only overrides: removing this stylesheet restores the previous appearance.
 */

:root {
    --sx-motion-ease: cubic-bezier(.23, 1, .32, 1);
    --sx-motion-mint: #55efb3;
    --sx-motion-mint-soft: #b8f8d8;
    --sx-motion-deep: #061923;
}

/* Calculator: deeper surfaces, a clearer route, and restrained branded light. */
.sx-public #hero .sx-exchange-shell {
    --sx-scroll-shift: 0px;
    isolation: isolate;
    perspective: 1000px;
}

.sx-public #hero .sx-exchange-shell::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 74%;
    height: 66%;
    right: -13%;
    top: 9%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 211, 153, .21), rgba(18, 139, 113, .07) 43%, transparent 72%);
    filter: blur(30px);
    transform: translate3d(0, var(--sx-scroll-shift), 0);
    transition: transform .12s linear;
    pointer-events: none;
}

.sx-public #hero .sx-exchange-top {
    padding-inline: 12px;
    color: #9fc8bb;
}

.sx-public #hero .sx-exchange-top > span:first-child::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4bf0ae;
    box-shadow: 0 0 14px rgba(75, 240, 174, .65);
}

.sx-public #hero .sx-exchange-top > span:first-child i { display: none; }

.sx-public #hero .sx-exchange-badge {
    border-color: rgba(119, 244, 190, .26);
    background: rgba(74, 222, 161, .06);
}

.sx-public #hero .sx-exchange {
    border-color: rgba(155, 246, 207, .38);
    background:
        radial-gradient(circle at 8% 3%, rgba(74, 222, 161, .18), transparent 30%),
        radial-gradient(circle at 95% 92%, rgba(20, 184, 166, .10), transparent 33%),
        linear-gradient(155deg, #102c31 0%, #091b27 48%, #081824 100%);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .46),
        0 0 0 1px rgba(174, 255, 219, .035) inset,
        0 1px rgba(224, 255, 241, .20) inset,
        0 0 65px rgba(16, 185, 129, .08);
}

.sx-public #hero .sx-exchange::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(118deg, transparent 18%, rgba(218, 255, 237, .045) 44%, transparent 66%);
    transform: translateX(-105%);
    transition: transform 700ms var(--sx-motion-ease);
    pointer-events: none;
}

.sx-public #hero .sx-exchange:hover::before,
.sx-public #hero .sx-exchange:focus-within::before { transform: translateX(105%); }

.sx-public #hero .sx-exchange-heading { position: relative; }

.sx-public #hero .sx-exchange-heading::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #6df2bb, transparent);
    box-shadow: 0 0 15px rgba(109, 242, 187, .48);
}

.sx-public #hero .sx-exchange-heading h2 {
    font-size: clamp(30px, 3.15vw, 40px);
    letter-spacing: -.062em;
    text-shadow: 0 10px 32px rgba(0, 0, 0, .26);
}

.sx-public #hero .sx-money-block {
    border-color: rgba(171, 226, 211, .17);
    background: linear-gradient(145deg, rgba(7, 24, 35, .94), rgba(9, 30, 41, .88));
    box-shadow: 0 12px 26px rgba(0, 0, 0, .13), 0 1px rgba(255, 255, 255, .025) inset;
    transition: border-color 220ms var(--sx-motion-ease), box-shadow 220ms var(--sx-motion-ease), transform 220ms var(--sx-motion-ease);
}

.sx-public #hero .sx-money-block:focus-within {
    border-color: rgba(104, 239, 185, .82);
    box-shadow: 0 0 0 4px rgba(61, 226, 160, .075), 0 18px 35px rgba(0, 0, 0, .20);
    transform: translateY(-2px);
}

.sx-public #hero .sx-money-receive {
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .22), transparent 26%),
        linear-gradient(120deg, #c0f8dc 0%, #79e5b4 56%, #48d39f 100%);
    box-shadow: 0 16px 36px rgba(16, 185, 129, .18), 0 1px rgba(255, 255, 255, .85) inset;
}

.sx-public #hero .sx-exchange-route { padding-block: 14px; }

.sx-public #hero .sx-route-arrow {
    box-shadow: 0 0 0 5px rgba(74, 222, 161, .055), 0 0 22px rgba(74, 222, 161, .12);
    transition: transform 220ms var(--sx-motion-ease), background-color 220ms var(--sx-motion-ease);
}

.sx-public #hero .sx-exchange:focus-within .sx-route-arrow {
    transform: translateY(3px);
    background: #1b493c;
}

.sx-public #hero .sx-route-rate strong {
    padding: 4px 8px;
    border: 1px solid rgba(126, 240, 194, .13);
    border-radius: 999px;
    background: rgba(90, 224, 169, .055);
}

.sx-public #hero .sx-exchange-details summary > i {
    transition: transform 200ms var(--sx-motion-ease), color 200ms var(--sx-motion-ease);
}

.sx-public #hero .sx-exchange-details[open] > summary > i { color: #83e8bd; }

.sx-public #hero .sx-exchange-details[open] > :not(summary) {
    animation: sx-details-in 240ms var(--sx-motion-ease) both;
    transform-origin: top center;
}

.sx-public #hero .sx-exchange-submit {
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(225, 255, 240, .75);
    background: linear-gradient(108deg, #c7ffe1 0%, #6bf1b7 48%, #2ed49e 100%);
    box-shadow: 0 13px 34px rgba(38, 218, 151, .28), 0 1px rgba(255, 255, 255, .9) inset;
    transition: transform 180ms var(--sx-motion-ease), box-shadow 220ms var(--sx-motion-ease), filter 220ms var(--sx-motion-ease);
}

.sx-public #hero .sx-exchange-submit::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 110px;
    height: 110px;
    right: -38px;
    top: -65px;
    border: 1px solid rgba(3, 62, 43, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(3, 62, 43, .035), 0 0 0 40px rgba(3, 62, 43, .02);
    transition: transform 280ms var(--sx-motion-ease);
}

.sx-public #hero .sx-exchange-submit:active { transform: scale(.98); }
.sx-public #hero .sx-exchange-submit:active::after { transform: scale(.9); }

/* Added only after JS loads, so content always remains visible if scripts are unavailable. */
.sx-motion-ready .sx-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 480ms var(--sx-motion-ease), transform 520ms var(--sx-motion-ease);
    transition-delay: var(--sx-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.sx-motion-ready .sx-reveal.sx-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.sx-motion-ready #hero .sx-exchange-shell.sx-reveal {
    transform: translate3d(0, 28px, 0) scale(.985);
}

.sx-motion-ready #hero .sx-exchange-shell.sx-reveal.sx-in-view {
    transform: translate3d(0, 0, 0) scale(1);
}

.sx-public #hero .sx-value-changing .sx-money-input input,
.sx-public #hero .sx-value-changing .sx-route-rate strong {
    animation: sx-value-settle 260ms var(--sx-motion-ease);
}

@keyframes sx-details-in {
    from { opacity: 0; transform: translate3d(0, -7px, 0) scaleY(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1); }
}

@keyframes sx-value-settle {
    0% { opacity: .52; transform: translate3d(0, 5px, 0); filter: blur(1.5px); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@media (hover: hover) and (pointer: fine) {
    .sx-public #hero .sx-exchange-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 44px rgba(38, 218, 151, .38), 0 1px rgba(255, 255, 255, .95) inset;
        filter: saturate(1.06) brightness(1.035);
    }

    .sx-public #hero .sx-exchange-submit:hover::after { transform: translate(-7px, 7px) scale(1.08); }
}

@media (max-width: 767px) {
    .sx-public #hero .sx-exchange-shell::before { right: -4%; width: 86%; filter: blur(38px); }
    .sx-public #hero .sx-exchange-heading h2 { font-size: clamp(27px, 8vw, 34px); }
    .sx-motion-ready .sx-reveal { transform: translate3d(0, 14px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sx-public #hero .sx-exchange-shell::before,
    .sx-public #hero .sx-exchange::before,
    .sx-public #hero .sx-money-block,
    .sx-public #hero .sx-route-arrow,
    .sx-public #hero .sx-exchange-details summary > i,
    .sx-public #hero .sx-exchange-submit,
    .sx-public #hero .sx-exchange-submit::after,
    .sx-motion-ready .sx-reveal,
    .sx-motion-ready #hero .sx-exchange-shell.sx-reveal {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    .sx-motion-ready .sx-reveal { opacity: 1; }
}

/* Device-inspired frame: desktop presentation for the exchange experience. */
@media (min-width: 768px) {
    .sx-public #hero .sx-exchange-shell {
        max-width: 442px;
        padding: 9px;
        border: 2px solid rgba(184, 255, 224, .38);
        border-radius: 50px;
        background:
            linear-gradient(115deg, rgba(198, 255, 228, .16), transparent 15%, transparent 82%, rgba(91, 228, 174, .13)),
            linear-gradient(155deg, #203b42 0%, #091720 18%, #050f18 76%, #183c34 100%);
        box-shadow:
            0 38px 105px rgba(0, 0, 0, .54),
            0 0 0 3px rgba(2, 10, 15, .92),
            0 0 0 5px rgba(164, 255, 215, .11),
            0 1px rgba(238, 255, 247, .34) inset,
            0 -1px rgba(0, 0, 0, .82) inset;
    }

    .sx-public #hero .sx-exchange-shell::after {
        content: '';
        position: absolute;
        top: 150px;
        right: -8px;
        width: 5px;
        height: 66px;
        border: 1px solid rgba(158, 239, 207, .24);
        border-left: 0;
        border-radius: 0 5px 5px 0;
        background: linear-gradient(180deg, #24473f, #08141a 20%, #102c28 78%, #23473e);
        box-shadow: 2px 0 5px rgba(0, 0, 0, .35), 1px 0 rgba(202, 255, 232, .13) inset;
        pointer-events: none;
    }

    .sx-public #hero .sx-exchange-top {
        position: relative;
        min-height: 40px;
        padding: 18px 11px 8px;
    }

    .sx-public #hero .sx-exchange-top::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 50%;
        width: 74px;
        height: 15px;
        border: 1px solid rgba(147, 231, 198, .16);
        border-radius: 999px;
        background:
            radial-gradient(circle at 77% 50%, #22635a 0 2px, transparent 3px),
            linear-gradient(180deg, #02070c, #07131b);
        box-shadow: 0 1px rgba(255, 255, 255, .05) inset, 0 3px 8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .42);
        transform: translateX(-50%);
        pointer-events: none;
    }

    .sx-public #hero .sx-exchange-top > span:first-child,
    .sx-public #hero .sx-exchange-badge {
        position: relative;
        z-index: 1;
    }

    .sx-public #hero .sx-exchange {
        padding: 23px 20px 20px;
        border-radius: 40px;
        border-color: rgba(155, 246, 207, .25);
        box-shadow:
            0 18px 52px rgba(0, 0, 0, .33),
            0 0 0 1px rgba(174, 255, 219, .035) inset,
            0 1px rgba(224, 255, 241, .18) inset;
    }

    .sx-public #hero .sx-exchange-heading {
        margin-bottom: 18px;
        padding-top: 0;
    }

    .sx-public #hero .sx-exchange-heading::after { margin-top: 13px; }

    .sx-public #hero .sx-exchange-heading h2 {
        font-size: clamp(29px, 2.8vw, 36px);
    }

    .sx-public #hero .sx-money-block { padding-block: 15px; }
    .sx-public #hero .sx-exchange-route { padding-block: 11px; }
    .sx-public #hero .sx-exchange-details { margin-top: 10px; }
    .sx-public #hero .sx-exchange-details summary { min-height: 37px; padding-block: 8px; }
    .sx-public #hero .sx-exchange-submit { min-height: 59px; margin-top: 16px; }
    .sx-public #hero .sx-exchange-note { margin-top: 10px; }
    .sx-public #hero .sx-exchange-terms { margin-top: 6px; }

    .sx-public #hero .sx-exchange-terms::after {
        content: '';
        display: block;
        width: 62px;
        height: 3px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: rgba(196, 238, 220, .40);
        box-shadow: 0 0 10px rgba(94, 234, 174, .10);
    }
}

/* Live statistics: moving ambient light and stronger separation between cards. */
.sx-public #live-stats {
    isolation: isolate;
    scroll-margin-top: 118px;
    background:
        radial-gradient(ellipse at 18% 48%, rgba(19, 145, 102, .24), transparent 45%),
        radial-gradient(ellipse at 84% 38%, rgba(13, 119, 125, .20), transparent 46%),
        linear-gradient(115deg, #06151f, #08232a 48%, #061722);
    border-color: rgba(105, 239, 185, .22);
    box-shadow: 0 1px rgba(187, 255, 224, .035) inset, 0 -1px rgba(187, 255, 224, .035) inset;
}

.sx-public #live-stats > div.absolute:nth-of-type(1) {
    opacity: .10;
    transform: scale(1.08);
    mix-blend-mode: screen;
}

.sx-public #live-stats > div.absolute:nth-of-type(2),
.sx-public #live-stats > div.absolute:nth-of-type(3) {
    width: 340px;
    height: 340px;
    opacity: .72;
    background: radial-gradient(circle, rgba(54, 229, 162, .24), rgba(20, 184, 166, .07) 48%, transparent 72%);
    filter: blur(76px);
}

.sx-public #live-stats .stat-card-premium {
    --stat-glow: #62efb3;
    border-color: rgba(111, 238, 187, .36);
    background:
        radial-gradient(circle at 96% 0%, rgba(61, 206, 155, .23), transparent 43%),
        linear-gradient(145deg, #123430, #091d29 72%);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 1px rgba(227, 255, 242, .10) inset, 0 0 28px rgba(37, 211, 154, .045);
}

.sx-public #live-stats .stat-card-premium:nth-child(2) {
    --stat-glow: #61e9ca;
    background:
        radial-gradient(circle at 100% 0%, rgba(35, 190, 166, .24), transparent 45%),
        linear-gradient(145deg, #113139, #081b29 72%);
}

.sx-public #live-stats .stat-card-premium:nth-child(3) {
    --stat-glow: #9af0b8;
    background:
        radial-gradient(circle at 100% 0%, rgba(108, 200, 127, .25), transparent 45%),
        linear-gradient(145deg, #18372f, #0a2028 72%);
}

.sx-public #live-stats .stat-card-premium:nth-child(4) {
    --stat-glow: #6fe7e3;
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 187, 194, .25), transparent 45%),
        linear-gradient(145deg, #12363a, #081d2a 72%);
}

.sx-public #live-stats .stat-card-premium:first-child {
    --stat-glow: #08734f;
    border-color: rgba(222, 255, 237, .88);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .36), transparent 42%),
        linear-gradient(125deg, #c8f9df, #72dfb3 62%, #4dcea0);
    box-shadow: 0 24px 56px rgba(13, 166, 111, .23), 0 1px rgba(255, 255, 255, .82) inset;
}

.sx-public #live-stats .stat-card-premium::before {
    width: 224px;
    height: 224px;
    right: -106px;
    top: -113px;
    border-color: color-mix(in srgb, var(--stat-glow) 38%, transparent);
    background: radial-gradient(circle at 25% 24%, color-mix(in srgb, var(--stat-glow) 25%, transparent), transparent 24%);
    box-shadow: 0 0 0 25px color-mix(in srgb, var(--stat-glow) 7%, transparent), 0 0 0 52px color-mix(in srgb, var(--stat-glow) 4%, transparent);
}

.sx-public #live-stats .stat-card-premium::after {
    background: linear-gradient(112deg, transparent 27%, rgba(231, 255, 244, .12) 48%, transparent 68%);
}

.sx-public #live-stats .stat-card-premium > .mono-font {
    color: #f4fff9;
    text-shadow: 0 7px 24px rgba(0, 0, 0, .24);
}

.sx-public #live-stats .stat-card-premium > p.text-slate-500 { color: #c0d8d0; }
.sx-public #live-stats .stat-card-premium .text-slate-400 { color: #c5ddd5; }

.sx-public #live-stats .stat-card-premium:hover {
    border-color: rgba(157, 249, 211, .76);
    box-shadow: 0 28px 64px rgba(0, 0, 0, .42), 0 0 34px color-mix(in srgb, var(--stat-glow) 12%, transparent), 0 1px rgba(238, 255, 247, .13) inset;
}

@media (prefers-reduced-motion: no-preference) {
    .sx-public #live-stats > div.absolute:nth-of-type(1) { animation: sx-stats-pan 18s linear infinite alternate; }
    .sx-public #live-stats > div.absolute:nth-of-type(2) { animation: sx-stats-drift-a 12s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
    .sx-public #live-stats > div.absolute:nth-of-type(3) { animation: sx-stats-drift-b 14s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
    .sx-public #live-stats .stat-card-premium::before { animation: sx-stat-orbit 13s linear infinite; }
    .sx-public #live-stats .stat-card-premium::after { animation: sx-stat-sheen 8s var(--sx-motion-ease) infinite; }
    .sx-public #live-stats .stat-card-premium:nth-child(2)::before,
    .sx-public #live-stats .stat-card-premium:nth-child(2)::after { animation-delay: -2s; }
    .sx-public #live-stats .stat-card-premium:nth-child(3)::before,
    .sx-public #live-stats .stat-card-premium:nth-child(3)::after { animation-delay: -4s; }
    .sx-public #live-stats .stat-card-premium:nth-child(4)::before,
    .sx-public #live-stats .stat-card-premium:nth-child(4)::after { animation-delay: -6s; }
}

@keyframes sx-stats-pan {
    from { transform: scale(1.08) translate3d(-1.5%, 0, 0); opacity: .08; }
    to { transform: scale(1.13) translate3d(1.5%, -1%, 0); opacity: .14; }
}

@keyframes sx-stats-drift-a {
    from { transform: translate3d(-24%, -16%, 0); opacity: .48; }
    to { transform: translate3d(54%, 18%, 0); opacity: .78; }
}

@keyframes sx-stats-drift-b {
    from { transform: translate3d(24%, 14%, 0); opacity: .44; }
    to { transform: translate3d(-52%, -20%, 0); opacity: .74; }
}

@keyframes sx-stat-orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sx-stat-sheen {
    0%, 52% { transform: translateX(-125%); }
    76%, 100% { transform: translateX(125%); }
}

@media (max-width: 767px) {
    .sx-public #live-stats > div.absolute:nth-of-type(2),
    .sx-public #live-stats > div.absolute:nth-of-type(3) {
        width: 240px;
        height: 240px;
        opacity: .52;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sx-public #live-stats > div.absolute,
    .sx-public #live-stats .stat-card-premium::before,
    .sx-public #live-stats .stat-card-premium::after {
        animation: none !important;
        transform: none !important;
    }
}

/* The phone owns the primary action on desktop; mobile keeps a shortcut to it. */
.sx-public #hero .sx-mobile-quote-wrap { display: none; }
.sx-public #hero #solex-calculator { scroll-margin-top: 118px; }

@media (max-width: 767px) {
    .sx-public #hero .sx-mobile-quote-wrap {
        display: block;
        width: 100%;
        padding-top: 6px;
    }

    .sx-public #hero .sx-mobile-quote-wrap > a {
        display: flex;
        width: 100%;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        padding: 15px 24px;
        border: 1px solid rgba(183, 255, 221, .32);
        border-radius: 16px;
        background: linear-gradient(105deg, #21c98f, #0aa371);
        box-shadow: 0 12px 30px rgba(16, 185, 129, .22);
        font-size: 12px;
        letter-spacing: .16em;
    }
}

/* Single-shell phone: the calculator surface is the screen, not a second card. */
@media (min-width: 768px) {
    .sx-public #hero .sx-exchange-shell {
        max-width: 442px;
        padding: 0;
        overflow: hidden;
        border: 6px solid #03090d;
        border-radius: 50px;
        background:
            radial-gradient(circle at 12% 0%, rgba(65, 220, 160, .17), transparent 31%),
            radial-gradient(circle at 100% 86%, rgba(20, 184, 166, .08), transparent 34%),
            linear-gradient(155deg, #102b30 0%, #081a25 50%, #071721 100%);
        box-shadow: 0 40px 110px rgba(0, 0, 0, .58), 0 0 70px rgba(18, 189, 131, .10);
    }

    .sx-public #hero .sx-exchange-shell::before,
    .sx-public #hero .sx-exchange-shell::after { display: none; }

    .sx-public #hero .sx-exchange-top {
        min-height: 46px;
        padding: 25px 17px 7px;
        background: transparent;
    }

    .sx-public #hero .sx-exchange-top::after {
        top: 7px;
        width: 78px;
        height: 16px;
        border: 0;
        background:
            radial-gradient(circle at 77% 50%, #245f56 0 2px, transparent 3px),
            #010609;
        box-shadow: 0 1px rgba(255, 255, 255, .035) inset;
    }

    .sx-public #hero .sx-exchange,
    .sx-public #hero .sx-exchange:hover,
    .sx-public #hero .sx-exchange:focus-within {
        padding: 18px 24px 20px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .sx-public #hero .sx-exchange::before {
        opacity: .48;
        border-radius: 0;
    }
}

/* Unified money fields: one visual language, with the action reserved as the focal color. */
.sx-public #hero .sx-exchange,
.sx-public #hero .sx-exchange:hover,
.sx-public #hero .sx-exchange:focus-within {
    border: 0;
    box-shadow: none;
}

.sx-public #hero .sx-money-receive {
    border-color: rgba(171, 226, 211, .17);
    background: linear-gradient(145deg, rgba(7, 24, 35, .94), rgba(9, 30, 41, .88));
    box-shadow: 0 12px 26px rgba(0, 0, 0, .13), 0 1px rgba(255, 255, 255, .025) inset;
}

.sx-public #hero .sx-money-receive label { color: #b5c6d2; }
.sx-public #hero .sx-money-receive label span {
    color: #87cbb0;
    background: rgba(79, 222, 163, .07);
}
.sx-public #hero .sx-money-receive input { color: #f1f9f6; }
.sx-public #hero .sx-money-receive input::placeholder { color: #79958f; }
.sx-public #hero .sx-money-receive .select2-selection--single {
    background: #213746 !important;
    border-color: rgba(215, 243, 240, .11) !important;
}
.sx-public #hero .sx-money-receive .select2-selection__rendered { color: #e0eeea !important; }
.sx-public #hero .sx-money-receive .select2-selection__arrow b { border-top-color: #a7c6bb !important; }

.sx-public #hero .sx-exchange-submit {
    color: #021f16;
    border-color: rgba(196, 255, 226, .78);
    background: linear-gradient(105deg, #88f4c4 0%, #3ce0a3 46%, #12bd83 100%);
    box-shadow: 0 14px 38px rgba(18, 189, 131, .34), 0 1px rgba(255, 255, 255, .82) inset;
}

@media (hover: hover) and (pointer: fine) {
    .sx-public #hero .sx-exchange-submit:hover {
        background: linear-gradient(105deg, #a5fbd2 0%, #55eab1 46%, #18ca8d 100%);
        box-shadow: 0 19px 48px rgba(18, 189, 131, .46), 0 1px rgba(255, 255, 255, .9) inset;
    }
}

/* All live-stat cards share the Users card's petroleum surface. */
.sx-public #live-stats .stat-card-premium,
.sx-public #live-stats .stat-card-premium:first-child,
.sx-public #live-stats .stat-card-premium:nth-child(2),
.sx-public #live-stats .stat-card-premium:nth-child(3),
.sx-public #live-stats .stat-card-premium:nth-child(4) {
    --stat-light: #61e9ca;
    --stat-glow: #61e9ca;
    border-color: rgba(111, 238, 187, .36);
    background:
        radial-gradient(circle at 100% 0%, rgba(35, 190, 166, .24), transparent 45%),
        linear-gradient(145deg, #113139, #081b29 72%);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 1px rgba(227, 255, 242, .10) inset, 0 0 28px rgba(37, 211, 154, .045);
}

.sx-public #live-stats .stat-card-premium:first-child > .mono-font { color: #f4fff9; }
.sx-public #live-stats .stat-card-premium:first-child > p.text-slate-500 { color: #c0d8d0; }
.sx-public #live-stats .stat-card-premium:first-child .text-emerald-400 { color: #73e9c5; }
.sx-public #live-stats .stat-card-premium:first-child > .flex:first-child > .w-10 {
    color: #61e9ca;
    border-color: rgba(197, 255, 229, .17);
    background: linear-gradient(140deg, rgba(197, 255, 229, .13), rgba(197, 255, 229, .02));
}
.sx-public #live-stats .stat-card-premium:first-child > .mt-4 { background: #1e2d3d; }
.sx-public #live-stats .stat-card-premium:first-child #volume-bar {
    background: linear-gradient(90deg, #24bd8d, #a2fad1);
    box-shadow: 0 0 12px rgba(80, 226, 168, .17);
}
.sx-public #live-stats .stat-card-premium:first-child::before {
    border-color: color-mix(in srgb, var(--stat-glow) 38%, transparent);
    box-shadow: 0 0 0 25px color-mix(in srgb, var(--stat-glow) 7%, transparent), 0 0 0 52px color-mix(in srgb, var(--stat-glow) 4%, transparent);
}