@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Shared typography: expressive headings, quiet labels, clear amounts. */
body.sx-public, body.sx-client { font-family: 'Manrope', system-ui, sans-serif; }
.sx-public h1, .sx-public h2, .sx-client h1, .sx-client h2, .sx-client .club-level-name,
.sx-client .premium-stat p[id], .sx-client .club-tier-rate { font-family: 'Outfit', system-ui, sans-serif; }
.sx-public #hero h1 { font-weight: 500; letter-spacing: -.045em; }
.sx-public #hero h1 > span { font-weight: 500; }
.sx-public #hero > .relative { align-items: start; }

/* Membership: less copy, more visual hierarchy. */
.sx-client main > .relative.overflow-hidden { padding: 24px 30px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; margin-bottom: 18px !important; }
.sx-client main > .relative.overflow-hidden::before { display: none; }
.sx-client main h1 { font-size: clamp(25px, 3vw, 34px); }
.sx-client .club-layout { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 22px; align-items: stretch; }
.sx-client .club-member { padding: 28px 30px; border-color: #8febc34a; background: radial-gradient(ellipse at 90% 0%, #3d77645e, transparent 60%), linear-gradient(125deg, #173f36, #112b32 65%, #112032); box-shadow: 0 26px 65px #0003, inset 0 1px #c4ffe31a; transition: border-color .3s, box-shadow .3s; }
.sx-client .club-member:hover { border-color: #a7f3d07a; box-shadow: 0 28px 70px #0004, 0 0 35px #34d39909; }
.sx-client .club-member::before { width: 520px; height: 520px; right: -190px; top: -220px; border-color: #c1f9d522; box-shadow: 0 0 0 45px #a7f3d007, 0 0 0 90px #a7f3d005; }
.sx-client .club-level-header { margin: 26px 0 14px; }
.sx-client .club-level-name { font-size: clamp(46px, 5.3vw, 68px); font-weight: 500; line-height: 1; }
.sx-client .club-emblem { width: 78px; height: 88px; border-radius: 24px; transform: rotate(-8deg); background: linear-gradient(140deg,#deefef55,#c4dcd80c 50%,#d9fff02e); border-color: #e0fff04a; text-shadow: 0 2px 18px #ecfff444; box-shadow: inset 0 1px #fff5, 8px 12px 25px #0002; transition: transform .3s; }
.sx-client .club-member:hover .club-emblem { transform: rotate(0deg) translateY(-3px); }
.sx-client .club-current-benefit { display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 6px 10px; border-radius: 8px; font-size: 11px; color: #bff9dc; background: #d2ffdf0b; }
.sx-client .club-next { margin-top: 20px; padding-top: 18px; }
.sx-client .club-next h3 { font-size: 12px; }
.sx-client .club-progress-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sx-client .club-progress-label { display: block; font-size: 11px; }
.sx-client .club-progress-label > span:last-child { display: block; font-family: 'Outfit',sans-serif; font-size: 19px; margin-top: 6px; }
.sx-client .club-progress-label .club-muted { font-family: 'Manrope',sans-serif; font-size: 11px; }
.sx-client .club-progress-track { height: 4px; }
.sx-client .club-progress-details { margin-top: 17px; }
.sx-client .club-progress-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; color: #bad6cb; font-size: 11px; min-height: 28px; }
.sx-client .club-progress-details summary::-webkit-details-marker { display: none; }
.sx-client .club-progress-details .club-member-note { margin-top: 8px; }
.sx-client .club-perks { padding: 25px; background: linear-gradient(140deg,#132533,#0b1928); border-color: #d8f6ed18; }
.sx-client .club-section-heading h2 { font-size: 22px; font-weight: 500 !important; margin: 0; }
.sx-client .club-section-heading > i { font-size: 19px; }
.sx-client .club-perk { padding: 18px 0; grid-template-columns: 42px minmax(0,1fr); gap: 14px; }
.sx-client .club-perk h3 { font-size: 14px; margin-bottom: 3px; }
.sx-client .club-perk-icon { height: 42px; border: 1px solid #a7f3d014; border-radius: 13px; background: linear-gradient(135deg,#224a3d,#102a2b); }
.sx-client .club-perk .club-muted { font-size: 11px; }
.sx-client .club-text-button { padding-top: 5px; min-height: 28px; font-size: 12px; }
.sx-client .club-level-guide { margin-bottom: 26px; background: #10202bcc; }
.sx-client .club-activity-heading h2 { font-size: 23px; }
.sx-client .premium-stat { padding: 18px 22px !important; }
.sx-client .premium-stat p[id] { font-weight: 500 !important; font-size: 30px; }

/* Exchange: one compact card, a clear flow and an illuminated result. */
.sx-public #hero .sx-exchange-shell { width: 100%; max-width: 510px; position: relative; }
.sx-public #hero .sx-exchange-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 5px 14px; color: #a8c7bc; font-size: 10px; letter-spacing: .15em; }
.sx-exchange-top > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.sx-exchange-top i { color: #6ee7b7; }
.sx-exchange-badge { font-size: 8px; letter-spacing: .12em; border: 1px solid #6ee7b73a; border-radius: 20px; padding: 4px 8px; color: #8cd9bb; }
.sx-public #hero .sx-exchange { position: relative; padding: 28px; border: 1px solid #91f2c64a; border-radius: 28px; background: radial-gradient(ellipse at 0% 0%,#22574466,transparent 48%),linear-gradient(155deg,#122a30,#0a1928 60%,#0d252a); box-shadow: 0 25px 80px #0005,inset 0 1px #c6ffdf30, 0 0 65px #10b9810c; transition: box-shadow .35s, border-color .35s; overflow: visible; }
.sx-public #hero .sx-exchange:hover, .sx-public #hero .sx-exchange:focus-within { border-color: #a7f3d085; box-shadow: 0 28px 85px #0005,0 0 50px #10b98116,inset 0 1px #c6ffdf40; }
.sx-public #hero .sx-exchange-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 25px; }
.sx-public #hero .sx-exchange-heading h2 { font-family: 'Outfit',sans-serif; font-size: clamp(25px,2.8vw,32px); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; }
.sx-public #hero .sx-exchange-heading h2 span { color: #a7f3d0; }
.sx-exchange-symbol { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid #acffd82a; border-radius: 16px; color: #b6f7d8; background: linear-gradient(145deg,#59bd8c33,#244d4622); transform: rotate(-8deg); font-size: 21px; }
.sx-public #hero .sx-money-block { border: 1px solid #b8dbdd24; background: #091827; padding: 17px 18px; border-radius: 18px; box-shadow: inset 0 1px #ffffff05; transition: border-color .2s; }
.sx-public #hero .sx-money-block:focus-within { border-color: #6ee7b7; }
.sx-public #hero .sx-money-block label { display: flex; justify-content: space-between; align-items: center; color: #b5c6d2; font-size: 11px; font-weight: 500; margin-bottom: 8px; }
.sx-public #hero .sx-money-input { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible; }
.sx-public #hero .sx-money-input::before, .sx-public #hero .sx-money-input::after { display: none; }
.sx-public #hero .sx-money-input input { width: 1%; min-width: 0; flex: 1; outline: none; background: transparent; color: #f1f9f6; border: 0; font-family: 'Outfit',sans-serif; font-size: clamp(29px,3vw,40px); font-weight: 500; letter-spacing: -.04em; box-shadow: none; font-variant-numeric: tabular-nums; }
.sx-public #hero .sx-money-input input::placeholder { color: #79958f; opacity: 1; }
.sx-public #hero .sx-money-input input[type='number'] { appearance: textfield; -moz-appearance: textfield; }
.sx-public #hero .sx-money-input input::-webkit-inner-spin-button, .sx-public #hero .sx-money-input input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.sx-public #hero .sx-money-input .select2-selection--single { height: 42px !important; border-radius: 11px !important; background: #213746 !important; box-shadow: 0 4px 12px #0001 !important; border: 1px solid #d7f3f01c !important; padding: 0 2px !important; }
.sx-public #hero .sx-money-input .select2-selection__rendered { color: #e0eeea !important; font-family: 'Manrope',sans-serif; font-size: 11px !important; font-weight: 600 !important; line-height: 42px !important; padding-left: 8px !important; padding-right: 22px !important; gap: 6px !important; }
.sx-public #hero .sx-money-input .select2-selection__arrow { height: 40px !important; right: 5px !important; }
.sx-public #hero .sx-money-input .select2-selection__arrow b { border-top-color: #a7c6bb !important; }
.sx-public #hero .sx-money-input select { max-width: 138px; background: #203b42; color: #effcf5; padding: 10px; border-radius: 10px; }
.sx-public #hero .sx-exchange-route { display: flex; align-items: center; gap: 12px; padding: 13px 8px; position: relative; }
.sx-route-line { width: 1px; height: 100%; position: absolute; top: 0; left: 25px; background: #73dab63b; }
.sx-route-arrow { position: relative; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #17382f; color: #7de5b8; border: 1px solid #80f0c23b; font-size: 12px; }
.sx-route-rate { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 14px; flex: 1; font-size: 10px; color: #8fa99f; }
.sx-route-rate strong { color: #9de9cb; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.sx-public #hero .sx-money-receive { background: linear-gradient(115deg,#b1f8d4,#79e7b5 62%,#58d6a5); border-color: #c9ffe4; box-shadow: 0 8px 25px #10b98119,inset 0 1px #effffb; }
.sx-public #hero .sx-money-receive label { color: #195740; }
.sx-public #hero .sx-money-receive label span { padding: 2px 6px; background: #176b4910; border-radius: 5px; font-size: 9px; }
.sx-public #hero .sx-money-receive input { color: #073e2c; }
.sx-public #hero .sx-money-receive input::placeholder { color: #2d8464; }
.sx-public #hero .sx-money-receive .select2-selection--single { background: #e4fff1b3 !important; border-color: #fbfff975 !important; }
.sx-public #hero .sx-money-receive .select2-selection__rendered { color: #103f2e !important; }
.sx-public #hero .sx-money-receive .select2-selection__arrow b { border-top-color: #39715b !important; }
.sx-exchange-details { margin-top: 14px; border-bottom: 1px solid #b5ebd612; }
.sx-exchange-details summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; padding: 10px 2px; list-style: none; color: #b5c7d1; font-size: 11px; min-height: 40px; }
.sx-exchange-details summary::-webkit-details-marker { display: none; }
.sx-exchange-details summary > span { display: flex; align-items: center; gap: 9px; }
.sx-exchange-details summary > i { color: #6ba68d; font-size: 9px; }
.sx-exchange-details[open] summary > i { transform: rotate(180deg); }
.sx-public #hero .sx-exchange .calc-breakdown { border: 0; border-radius: 12px; background: #071722; padding: 10px; margin-bottom: 12px; box-shadow: none; }
.sx-public #hero .sx-exchange .calc-label, .sx-public #hero .sx-exchange .calc-value { font-size: 11px; }
.sx-exchange .sx-coupon { margin-top: 0; }
.sx-coupon-field { display: flex; gap: 8px; padding-block: 6px 12px; }
.sx-coupon-field input { background: #081622; color: #d9ede4; min-width: 0; flex: 1; border: 1px solid #b2e9d12a; border-radius: 9px; padding: 11px; font-size: 12px; }
.sx-coupon-field button { border-radius: 9px; padding: 10px 16px; background: #204438; color: #b6f5d6; font-size: 12px; }
.sx-exchange-submit { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; margin-top: 20px; padding: 16px 22px; border-radius: 14px; background: linear-gradient(100deg,#12b87b,#27d79c); color: #042f22; font-size: 14px; font-weight: 700; box-shadow: 0 8px 30px #10b98120,inset 0 1px #c3ffe36b; transition: transform .2s,box-shadow .2s; }
.sx-exchange-submit::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg,transparent 25%,#ffffff38 50%,transparent 75%); transform: translateX(-140%); transition: transform .7s; }
.sx-exchange-submit:hover::before { transform: translateX(140%); }
.sx-exchange-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 35px #10b98130; }
.sx-exchange-submit i { border-radius: 50%; background: #064b3320; padding: 8px; font-size: 12px; }
.sx-exchange-note { font-size: 9px; line-height: 1.7; color: #94ada6; text-align: center; margin: 14px 4px 0; }
.sx-exchange-note i { color: #87c9ab; margin-right: 3px; }
.sx-exchange-terms { display: block; text-align: center; color: #a4c2b6; text-decoration: underline; text-underline-offset: 3px; font-size: 9px; margin-top: 8px; }
.sx-client #modalOrder .operation-modal-card { background: radial-gradient(ellipse at 100% 0%,#24544066,transparent 55%),#0b1a29 !important; border-color: #95ebc34a !important; }
.sx-client #modalOrder #label-total { font-family: 'Outfit',sans-serif; font-size: 36px; font-weight: 500; color: #b1f8d4; }
.sx-client #modalOrder #btnConfirm { box-shadow: 0 8px 24px #10b98120; }
@media (max-width:767px) {
    .sx-client main > .relative.overflow-hidden { padding: 10px 0 18px !important; }
    .sx-client .club-layout { grid-template-columns: 1fr; }
    .sx-client .club-member { padding: 24px; }
    .sx-client .club-perks { padding: 22px; }
    .sx-client .club-progress-pair { gap: 14px; }
    .sx-client .club-text-button { min-height: 40px; }
    .sx-client .club-emblem { width: 65px; height: 74px; }
    .sx-client .club-level-name { font-size: 52px; }
    .sx-public #hero .sx-exchange { padding: 22px 18px; border-radius: 23px; }
    .sx-public #hero .sx-money-block { padding: 15px 12px; }
    .sx-public #hero .sx-money-input { gap: 6px; }
    .sx-public #hero .sx-money-input .select2-container { width: 120px !important; max-width: 120px !important; }
    .sx-public #hero .sx-money-input input { font-size: 30px; }
    .sx-public #hero .sx-exchange-heading h2 { font-size: 28px; }
    .sx-exchange-details summary { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) { .sx-client .club-member, .sx-client .club-emblem, .sx-public #hero .sx-exchange, .sx-exchange-submit, .sx-exchange-submit::before { transition: none; transform: none; } }

/* Exchange focal point and illuminated public indicators. */
.sx-public #hero .sx-exchange-heading { display: block; text-align: center; padding: 4px 0 6px; margin-bottom: 24px; }
.sx-public #hero .sx-exchange-heading h2 { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size: clamp(29px, 3.05vw, 38px); line-height: 1.12; font-weight: 700; letter-spacing: -.055em; color: #f4fff9; text-wrap: balance; }
.sx-public #hero .sx-exchange-heading h2 span { display: inline-block; margin-top: 5px; background: linear-gradient(105deg,#d9ffe7,#82f4bf 48%,#37d5aa); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 15px #63edb524); }
.sx-public #hero .sx-exchange-symbol { display: none; }
.sx-public #hero .sx-exchange-submit { justify-content: center; gap: 16px; min-height: 64px; font-family: 'Space Grotesk','Manrope',sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.025em; background: linear-gradient(110deg,#abffd5,#59ebb0 52%,#28cf99); border: 1px solid #c0ffdfa6; box-shadow: 0 10px 30px #28cf9933,inset 0 1px #effffbcc; }
.sx-public #hero .sx-exchange-submit:hover { background: linear-gradient(110deg,#ceffe4,#83f7c5 52%,#43dda8); box-shadow: 0 14px 40px #28cf9950; transform: translateY(-3px); }
.sx-public #hero .sx-exchange-submit i { background: #07583e16; border: 1px solid #07482c18; padding: 9px; transition: transform .25s; }
.sx-public #hero .sx-exchange-submit:hover i { transform: translateX(4px); }

.sx-public #live-stats { background: radial-gradient(ellipse at 20% 45%,#176e4c30,transparent 55%),radial-gradient(ellipse at 100% 0%,#167e7130,transparent 48%),#06151f; border-top: 1px solid #7de7bd21; border-bottom: 1px solid #7de7bd21; }
.sx-public #live-stats .stat-card-premium { --stat-light:#70efb7; position: relative; isolation: isolate; overflow: hidden; padding: 26px; min-height: 225px; border: 1px solid #b8ffe533; border-radius: 22px; background: radial-gradient(ellipse at 100% 0%,#2d806946,transparent 65%),linear-gradient(145deg,#153b39,#0d2230 70%); box-shadow: 0 16px 38px #0003,inset 0 1px #effff514; transition: transform .3s,border-color .3s,box-shadow .3s; }
.sx-public #live-stats .stat-card-premium:nth-child(3) { --stat-light:#b6f4d5; background: radial-gradient(ellipse at 100% 0%,#4b906c42,transparent 65%),linear-gradient(145deg,#1b3d35,#102a2d 70%); }
.sx-public #live-stats .stat-card-premium:nth-child(4) { --stat-light:#7fe4e1; background: radial-gradient(ellipse at 100% 0%,#2d8c9445,transparent 65%),linear-gradient(145deg,#173f43,#102430 70%); }
.sx-public #live-stats .stat-card-premium::before { content:''; position:absolute; inset:auto; width:180px; height:180px; right:-85px; top:-92px; border:1px solid #beffe02b; border-radius:50%; background:transparent; opacity:1; box-shadow:0 0 0 22px #b7ffdf07,0 0 0 44px #b7ffdf04; pointer-events:none; z-index:-1; transform:none; animation:none; }
.sx-public #live-stats .stat-card-premium::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,#ffffff08 45%,transparent 65%); transform:translateX(-120%); transition:transform .75s; pointer-events:none; z-index:-1; }
.sx-public #live-stats .stat-card-premium:hover { transform:translateY(-5px); border-color:#a7f3d070; box-shadow:0 20px 44px #0004,0 0 24px #42d6a512; }
.sx-public #live-stats .stat-card-premium:hover::after { transform:translateX(120%); }
.sx-public #live-stats .stat-card-premium > .flex:first-child > .w-10 { width:44px; height:44px; border-radius:14px; background:linear-gradient(140deg,#c5ffe521,#c5ffe505); border:1px solid #c5ffe52c; color:var(--stat-light); box-shadow:inset 0 1px #fff1,0 5px 15px #0001; }
.sx-public #live-stats .stat-card-premium > .flex:first-child > .w-10 i { font-size:18px; }
.sx-public #live-stats .stat-card-premium > .mono-font { font-family:'Space Grotesk','Manrope',sans-serif; font-size:clamp(35px,3.1vw,44px); line-height:1.2; font-weight:600; letter-spacing:-.055em; color:#effff6; font-variant-numeric:tabular-nums; margin-top:20px; }
.sx-public #live-stats .stat-card-premium > p.text-slate-500 { font-size:11px; text-transform:none; letter-spacing:.015em; font-weight:500; color:#b1cfc5; }
.sx-public #live-stats .stat-card-premium .text-slate-400 { color:#b5d9cb; }
.sx-public #live-stats .stat-card-premium > .mt-4 { margin-top:20px; }
.sx-public #live-stats .sparkline-container { opacity:1; width:82px; height:27px; }
.sx-public #live-stats .sparkline-bar { background:linear-gradient(180deg,#87f1bd,#25ab87); box-shadow:0 0 10px #72efb51a; }
.sx-public #live-stats #volume-bar, .sx-public #live-stats #time-bar { background:linear-gradient(90deg,#24bd8d,#a2fad1); box-shadow:0 0 12px #50e2a82b; }
.sx-public #live-stats .stat-card-premium:first-child { --stat-light:#0a684b; background:radial-gradient(ellipse at 100% 0%,#ecffe8a6,transparent 70%),linear-gradient(120deg,#aff7d1,#65dcae); border-color:#d2ffe5; box-shadow:0 14px 40px #22b98120,inset 0 1px #f1fff5; }
.sx-public #live-stats .stat-card-premium:first-child > .mono-font { color:#073e2e; }
.sx-public #live-stats .stat-card-premium:first-child > p.text-slate-500 { color:#23694f; }
.sx-public #live-stats .stat-card-premium:first-child > .flex:first-child > .w-10 { background:#07563c10; border-color:#07563c26; }
.sx-public #live-stats .stat-card-premium:first-child .text-emerald-400 { color:#07553e; }
.sx-public #live-stats .stat-card-premium:first-child > .mt-4 { background:#0d674128; }
.sx-public #live-stats .stat-card-premium:first-child #volume-bar { background:linear-gradient(90deg,#075d43,#179367); box-shadow:none; }
.sx-public #live-stats .stat-card-premium:first-child::before { border-color:#074e2e20; box-shadow:0 0 0 22px #074e2e04,0 0 0 44px #074e2e03; }
@media(max-width:767px) {
    .sx-public #hero .sx-exchange-heading h2 { font-size:clamp(25px,7.2vw,33px); }
    .sx-public #hero .sx-exchange-submit { font-size:17px; min-height:60px; }
    .sx-public #live-stats .stat-card-premium { padding:20px; min-height:210px; }
    .sx-public #live-stats .stat-card-premium > .mono-font { font-size:34px !important; }
}
@media(prefers-reduced-motion:reduce) {
    .sx-public #hero .sx-exchange-submit, .sx-public #hero .sx-exchange-submit i, .sx-public #live-stats .stat-card-premium, .sx-public #live-stats .stat-card-premium::after { transition:none; transform:none; }
}