.rx-chat {
--rx-chat-accent-2: #c13f1e; position: fixed !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important; z-index: 999999 !important;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
font-style: normal !important;
} .rx-chat--bottom-right { right: var(--rx-chat-x, 20px) !important; bottom: var(--rx-chat-y, 20px) !important; }
.rx-chat--bottom-left  { left:  var(--rx-chat-x, 20px) !important; bottom: var(--rx-chat-y, 20px) !important; align-items: flex-start !important; }
.rx-chat--top-right    { right: var(--rx-chat-x, 20px) !important; top:    var(--rx-chat-y, 20px) !important; flex-direction: column-reverse !important; }
.rx-chat--top-left     { left:  var(--rx-chat-x, 20px) !important; top:    var(--rx-chat-y, 20px) !important; flex-direction: column-reverse !important; align-items: flex-start !important; } .rx-chat .rx-chat__toggle {
-webkit-appearance: none !important;
appearance: none !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: var(--rx-chat-size, 60px) !important;
height: var(--rx-chat-size, 60px) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 50% !important;
background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
color: #fff !important;
cursor: pointer !important;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
0 12px 32px rgba(0, 0, 0, 0.35),
0 0 32px rgba(220, 79, 44, 0.35) !important;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
-webkit-tap-highlight-color: transparent;
}
.rx-chat .rx-chat__toggle:hover,
.rx-chat .rx-chat__toggle:focus-visible {
background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.05) !important;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
0 16px 40px rgba(0, 0, 0, 0.4),
0 0 48px rgba(220, 79, 44, 0.5) !important;
}
.rx-chat .rx-chat__toggle:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.9) !important;
outline-offset: 3px !important;
}
.rx-chat .rx-chat__toggle svg {
width: 46% !important;
height: 46% !important;
display: block !important;
} .rx-chat .rx-chat__glyph-bubble { fill: #fff !important; }
.rx-chat .rx-chat__glyph-dot { fill: var(--rx-chat-accent, #dc4f2c) !important; } .rx-chat--single .rx-chat__toggle--wa {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 50% !important;
background: linear-gradient(150deg, #2ce072 0%, #1faf55 100%) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
.rx-chat--single .rx-chat__toggle--wa svg { width: 56% !important; height: 56% !important; fill: #fff !important; }
.rx-chat--single a {
display: block !important;
width: var(--rx-chat-size, 60px) !important;
height: var(--rx-chat-size, 60px) !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.rx-chat--single a:hover { transform: translateY(-2px) scale(1.05) !important; } .rx-chat .rx-chat__icon {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.rx-chat .rx-chat__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.5); }
.rx-chat .rx-chat__icon--close svg { fill: #fff !important; }
.rx-chat.rx-chat--open .rx-chat__icon--chat { opacity: 0; transform: rotate(45deg) scale(0.5); }
.rx-chat.rx-chat--open .rx-chat__icon--close { opacity: 1; transform: none; } .rx-chat .rx-chat__panel {
position: relative !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
box-sizing: border-box !important;
width: min(320px, calc(100vw - 2 * var(--rx-chat-x, 20px))) !important;
margin: 0 !important;
padding: 20px !important;
border: 0 !important;
border-radius: 20px !important;
background:
radial-gradient(circle 220px at calc(100% + 40px) -40px, rgba(220, 79, 44, 0.22) 0%, transparent 65%),
linear-gradient(175deg, rgba(11, 16, 35, 0.92) 0%, rgba(7, 10, 24, 0.94) 100%) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
0 24px 64px rgba(0, 0, 0, 0.45) !important;
transform-origin: bottom right;
animation: rx-chat-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rx-chat .rx-chat__panel[hidden] { display: none !important; } .rx-chat .rx-chat__panel::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(220, 79, 44, 0.45) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.rx-chat--bottom-left .rx-chat__panel { transform-origin: bottom left; }
.rx-chat--top-right .rx-chat__panel { transform-origin: top right; }
.rx-chat--top-left .rx-chat__panel { transform-origin: top left; }
@keyframes rx-chat-pop {
from { opacity: 0; transform: translateY(10px) scale(0.95); }
to   { opacity: 1; transform: none; }
}
.rx-chat .rx-chat__heading {
margin: 0 0 6px !important;
padding: 0 !important;
color: #fff !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.35 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
} .rx-chat .rx-chat__option {
-webkit-appearance: none !important;
appearance: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 14px !important;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
color: #fff !important;
text-decoration: none !important;
text-transform: none !important;
cursor: pointer !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.3 !important;
letter-spacing: normal !important;
text-align: left !important;
text-shadow: none !important;
box-shadow: none !important;
transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease !important;
-webkit-tap-highlight-color: transparent;
}
.rx-chat .rx-chat__option:hover,
.rx-chat .rx-chat__option:focus-visible {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
color: #fff !important;
}
.rx-chat .rx-chat__option:focus-visible {
outline: 2px solid var(--rx-chat-accent, #dc4f2c) !important;
outline-offset: 2px !important;
}
.rx-chat .rx-chat__option-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 12px !important;
color: #fff !important;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22) !important;
}
.rx-chat .rx-chat__option-icon svg { width: 22px !important; height: 22px !important; fill: currentColor !important; display: block !important; }
.rx-chat .rx-chat__option--live .rx-chat__option-icon {
background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
}
.rx-chat .rx-chat__option--wa .rx-chat__option-icon {
background: linear-gradient(150deg, #2ce072 0%, #1faf55 100%) !important;
}
.rx-chat .rx-chat__option-text {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
text-align: left !important;
}
.rx-chat .rx-chat__option-text strong {
font-weight: 600 !important;
font-style: normal !important;
font-size: 14px !important;
color: #fff !important;
letter-spacing: 0.01em !important;
}
.rx-chat .rx-chat__option-text small {
font-size: 12px !important;
font-weight: 400 !important;
font-style: normal !important;
color: rgba(255, 255, 255, 0.6) !important;
letter-spacing: normal !important;
} @media (max-width: 767px) {
.rx-chat--show-desktop { display: none !important; }
}
@media (min-width: 768px) {
.rx-chat--show-mobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.rx-chat .rx-chat__toggle,
.rx-chat .rx-chat__icon,
.rx-chat .rx-chat__option,
.rx-chat--single a { transition: none !important; }
.rx-chat .rx-chat__panel { animation: none !important; }
.rx-chat .rx-chat__toggle:hover,
.rx-chat .rx-chat__toggle:focus-visible,
.rx-chat--single a:hover { transform: none !important; }
}.rx-ticker {
border-radius: var(--rx-r-lg);
border: 1px solid var(--rx-line);
background: var(--rx-navy-700);
overflow: hidden;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
} .rx-ticker__header {
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid var(--rx-line);
gap: 12px;
min-height: 52px;
} .rx-ticker__tabs {
display: flex;
align-items: stretch;
align-self: stretch;
gap: 0;
flex: 1;
}
.rx-ticker__tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 16px;
color: rgba(255, 255, 255, 0.58);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
position: relative;
white-space: nowrap;
transition: color 180ms ease;
} .rx-ticker__tab::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--rx-orange);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: left center;
transition: transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.rx-ticker__tab:hover:not(.is-active) {
color: rgba(255, 255, 255, 0.6);
}
.rx-ticker__tab.is-active {
color: #fff;
}
.rx-ticker__tab.is-active::after {
transform: scaleX(1);
}
.rx-ticker__tab:focus-visible {
outline: 2px solid var(--rx-orange);
outline-offset: -2px;
} .rx-ticker__tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.25);
font-size: 9px;
font-weight: 700;
letter-spacing: 0;
transition: background 180ms ease, color 180ms ease;
}
.rx-ticker__tab.is-active .rx-ticker__tab-count {
background: rgba(220, 79, 44, 0.18);
color: var(--rx-orange-300);
} .rx-ticker__badge {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: var(--rx-r-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
white-space: nowrap;
transition: color var(--rx-dur-base), border-color var(--rx-dur-base);
}
.rx-ticker__badge::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.rx-ticker__badge[data-status='live'] {
color: #4ADE80;
border-color: rgba(74, 222, 128, 0.22);
}
.rx-ticker__badge[data-status='live']::before {
animation: rx-dot-pulse 2.2s ease-in-out infinite;
}
.rx-ticker__badge[data-status='connecting'] {
color: var(--rx-orange-300);
border-color: rgba(220, 79, 44, 0.22);
}
.rx-ticker__badge[data-status='offline'] {
color: #FF8C8C;
border-color: rgba(255, 140, 140, 0.22);
}
.rx-ticker__badge[data-status='closed'] {
color: #FFC56E;
border-color: rgba(255, 197, 110, 0.22);
} .rx-ticker__instruments {
flex-shrink: 0;
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--rx-orange-300);
white-space: nowrap;
}
@media (max-width: 600px) {
.rx-ticker__instruments { display: none; }
} .rx-ticker__updated {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.58);
white-space: nowrap;
}
.rx-ticker__updated:empty { display: none; } .rx-ticker__seed {
margin-left: 5px;
color: var(--rx-orange-300);
opacity: 0.7;
font-weight: 700;
}
@keyframes rx-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50%       { opacity: 0.3; transform: scale(0.7); }
} .rx-ticker__body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rx-ticker__table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
} .rx-ticker__th {
padding: 8px 16px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
border-bottom: 1px solid var(--rx-line);
white-space: nowrap;
text-align: left;
} .rx-ticker__th--symbol { width: 1%; }
.rx-ticker__th--bid,
.rx-ticker__th--ask,
.rx-ticker__th--mid,
.rx-ticker__th--spread { text-align: right; }
.rx-ticker__th--change { text-align: center; width: 60px; } .rx-ticker__row {
border-bottom: 1px solid rgba(255, 255, 255, 0.035);
transition: background 120ms ease;
}
.rx-ticker__row:last-child { border-bottom: none; }
.rx-ticker__row:nth-child(even) {
background: rgba(255, 255, 255, 0.012);
}
.rx-ticker__row:hover {
background: rgba(255, 255, 255, 0.045) !important;
} .rx-ticker__row--flash {
animation: rx-ticker-flash 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rx-ticker__row--flash[data-dir='up'] {
--rx-flash-start: rgba(74, 222, 128, 0.18);
}
.rx-ticker__row--flash[data-dir='down'] {
--rx-flash-start: rgba(255, 140, 140, 0.18);
}
.rx-ticker__row--flash[data-dir='neutral'],
.rx-ticker__row--flash:not([data-dir]) {
--rx-flash-start: rgba(220, 79, 44, 0.1);
}
@keyframes rx-ticker-flash {
0%   { background: var(--rx-flash-start); }
22%  { background: var(--rx-flash-start); } 100% { background: transparent; }
} .rx-ticker__td {
padding: 11px 16px;
color: rgba(255, 255, 255, 0.78);
white-space: nowrap;
}
.rx-ticker__td--symbol {
width: 1%;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
padding-right: 28px;
white-space: nowrap;
}
.rx-ticker__td--num {
text-align: right;
color: rgba(255, 255, 255, 0.88);
}
.rx-ticker__td--change {
text-align: center;
width: 60px;
} .rx-ticker__dir {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 20px;
border-radius: 5px;
font-size: 9px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
.rx-ticker__dir--up {
color: #4ADE80;
background: rgba(74, 222, 128, 0.12);
}
.rx-ticker__dir--down {
color: #FF8C8C;
background: rgba(255, 140, 140, 0.12);
}
.rx-ticker__dir--neutral {
color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.04);
}  .rx-ticker__th--bid,
.rx-ticker__td--bid,
.rx-ticker__th--ask,
.rx-ticker__td--ask,
.rx-ticker__th--spread,
.rx-ticker__td--spread { width: 1%; }
.rx-ticker__th--symbol,
.rx-ticker__td--symbol { width: auto; }
.rx-ticker__th--spark { text-align: center; width: 300px; }
.rx-ticker__td--spark {
width: 300px;
padding-top: 6px;
padding-bottom: 6px;
vertical-align: middle;
}
.rx-ticker__spark-svg { display: block; width: 100%; height: 24px; overflow: visible; }
.rx-ticker__spark {
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke; }
.rx-ticker__spark-area { stroke: none; }
.rx-ticker__spark-svg[data-dir='up']   .rx-ticker__spark      { stroke: #4ADE80; filter: drop-shadow(0 0 2px rgba(74, 222, 128, 0.45)); }
.rx-ticker__spark-svg[data-dir='down'] .rx-ticker__spark      { stroke: #FF8C8C; filter: drop-shadow(0 0 2px rgba(255, 140, 140, 0.45)); }
.rx-ticker__spark-svg[data-dir='up']   .rx-ticker__spark-area { fill: url(#rx-spark-grad-up); }
.rx-ticker__spark-svg[data-dir='down'] .rx-ticker__spark-area { fill: url(#rx-spark-grad-down); } @media (max-width: 640px) {
.rx-ticker__th--spark,
.rx-ticker__td--spark { display: none; } .rx-ticker__th--change,
.rx-ticker__td--change { display: none; } .rx-ticker__th--spread {
white-space: normal;
line-height: 1.15;
} .rx-ticker__th { vertical-align: bottom; } .rx-ticker__th,
.rx-ticker__td { padding-left: 10px; padding-right: 10px; }
.rx-ticker__td--symbol { padding-right: 12px; }
} .rx-ticker__empty {
padding: 40px 16px;
text-align: center;
font-size: 12px;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.22);
} @media (prefers-reduced-motion: reduce) {
.rx-ticker__row--flash                     { animation: none; }
.rx-ticker__badge[data-status]::before     { animation: none; }
} .rx-quote-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 14px 12px;
border-radius: var(--rx-r-lg);
border: 1px solid var(--rx-line);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%),
var(--rx-navy-700, #11182b);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
min-width: 210px;
overflow: hidden;
}
.rx-quote-card__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.rx-quote-card__sym {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
}
.rx-quote-card__chg {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.rx-quote-card__chg[data-dir='up']   { color: #4ADE80; }
.rx-quote-card__chg[data-dir='down'] { color: #FF8C8C; }
.rx-quote-card__chg[data-dir='flat'] { color: rgba(255, 255, 255, 0.35); } .rx-quote-card__quotes {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 6px;
} .rx-quote-card__side {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: var(--rx-r-md, 10px);
border: 1px solid transparent;
}
.rx-quote-card__side--sell {
background: rgba(255, 140, 140, 0.07);
border-color: rgba(255, 140, 140, 0.16);
align-items: flex-start;
}
.rx-quote-card__side--buy {
background: rgba(74, 222, 128, 0.07);
border-color: rgba(74, 222, 128, 0.16);
align-items: flex-end;
text-align: right;
}
.rx-quote-card__side-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.rx-quote-card__side--sell .rx-quote-card__side-label { color: #FF8C8C; }
.rx-quote-card__side--buy  .rx-quote-card__side-label { color: #4ADE80; }
.rx-quote-card__price {
font-size: 19px;
font-weight: 700;
line-height: 1.05;
color: #fff;
letter-spacing: -0.01em;
} .rx-quote-card__spread {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 0 4px;
color: rgba(255, 255, 255, 0.5);
}
.rx-quote-card__spread b {
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, 0.82);
}
.rx-quote-card__spread small {
font-size: 8px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.6;
} .rx-quote-card__spark-wrap {
height: 30px;
margin: -2px 0;
}
.rx-quote-card__spark-wrap svg { display: block; width: 100%; height: 100%; }
.rx-quote-card__spark { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rx-quote-card__spark-wrap[data-dir='up']   .rx-quote-card__spark { stroke: #4ADE80; }
.rx-quote-card__spark-wrap[data-dir='down'] .rx-quote-card__spark { stroke: #FF8C8C; } .rx-quote-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.rx-quote-card__status {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255, 255, 255, 0.4);
}
.rx-quote-card__status::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.rx-quote-card[data-state='live']   .rx-quote-card__status { color: #4ADE80; }
.rx-quote-card[data-state='live']   .rx-quote-card__status::before { animation: rx-dot-pulse 2.2s ease-in-out infinite; }
.rx-quote-card[data-state='closed'] .rx-quote-card__status { color: #FFC56E; }
.rx-quote-card[data-state='stale']  .rx-quote-card__status { color: rgba(255, 255, 255, 0.4); }
.rx-quote-card__time { color: rgba(255, 255, 255, 0.3); } .rx-quote-card--flash[data-tick='up']::after,
.rx-quote-card--flash[data-tick='down']::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
animation: rx-card-flash 1.1s ease-out forwards;
}
.rx-quote-card--flash[data-tick='up']::after   { background: radial-gradient(120% 80% at 80% 0%, rgba(74, 222, 128, 0.16), transparent 70%); }
.rx-quote-card--flash[data-tick='down']::after { background: radial-gradient(120% 80% at 20% 0%, rgba(255, 140, 140, 0.16), transparent 70%); }
@keyframes rx-card-flash {
0%   { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.rx-quote-card--flash::after { animation: none; }
.rx-quote-card__side:hover   { transform: none; }
} .rx-live-float { display: none; } body.rx-has-float { position: relative; }
@media (min-width: 1280px) {
.rx-live-float {
display: block;
position: absolute; top: 0;
left: 0;
width: 100%;
height: 100%; overflow: hidden; z-index: 0; pointer-events: none; perspective: 1600px; }
.rx-live-float__slot {
position: absolute; width: 340px; pointer-events: none;  --rx-float-opacity: 0.7;
--rx-float-scale: 0.96;
--rx-float-rot: 0deg;
opacity: 0; scale: var(--rx-float-scale, 0.94);
transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1);
transform-style: preserve-3d; --rx-par: 0px;  animation:
rx-float-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
rx-float-drift 17s ease-in-out infinite;
filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.5));
} .rx-live-float__slot::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--rx-r-lg, 16px);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.55));
transform: translate(4px, 5px) translateZ(-10px);
z-index: -1; -webkit-mask-image: var(--rx-slot-mask, none);
mask-image: var(--rx-slot-mask, none);
} .rx-live-float__ghost {
position: absolute;
inset: 0;
filter: blur(7px) saturate(85%) brightness(0.85);
opacity: 0.6;
pointer-events: none;
}  .rx-live-float__slot--right { right: clamp(24px, 4vw, 72px); transform: translateY(var(--rx-par)) rotateY(calc(-7deg + var(--rx-float-rot))) rotateX(2deg); }
.rx-live-float__slot--left  { left:  clamp(24px, 4vw, 72px); transform: translateY(var(--rx-par)) rotateY(calc(7deg + var(--rx-float-rot)))  rotateX(2deg); } .rx-live-float__slot:nth-child(3n)   { animation-delay: 0.50s,  -4s; animation-duration: 0.9s, 26s; }
.rx-live-float__slot:nth-child(3n+1) { animation-delay: 0.35s,  -9s; animation-duration: 0.9s, 21s; }
.rx-live-float__slot:nth-child(3n+2) { animation-delay: 0.60s, -13s; animation-duration: 0.9s, 24s; } .rx-live-float .rx-quote-card {
min-width: 0;
width: 100%;
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%),
rgba(13, 19, 38, 0.42);
-webkit-backdrop-filter: blur(22px) saturate(135%);
backdrop-filter: blur(22px) saturate(135%);
border-width: 1.5px;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 24px 60px -28px rgba(0, 0, 0, 0.7),
0 0 60px -20px rgba(220, 79, 44, 0.18);
} .rx-live-float__slot:nth-child(3n+2) .rx-quote-card,
.rx-live-float__slot:nth-child(3n+2) .rx-viz-card {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 24px 60px -28px rgba(0, 0, 0, 0.7),
0 0 60px -20px rgba(43, 183, 240, 0.18);
} .rx-live-float .rx-quote-card { padding: 18px 20px 15px; gap: 12px; }
.rx-live-float .rx-quote-card__price { font-size: 20px; letter-spacing: -0.02em; } .rx-viz-card {
width: 100%;
padding: 18px 20px 16px;
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%),
rgba(13, 19, 38, 0.42);
-webkit-backdrop-filter: blur(22px) saturate(135%);
backdrop-filter: blur(22px) saturate(135%);
border: 1.5px solid rgba(255, 255, 255, 0.16);
border-radius: 16px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 24px 60px -28px rgba(0, 0, 0, 0.7);
} .rx-viz-card__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 9px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rx-viz-card__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.85);
}
.rx-viz-card__tag {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.55);
padding: 2px 7px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 6px;
}
.rx-viz-card__chart {
position: relative;
height: 86px;
overflow: visible; background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 25% 33.4%;
}
.rx-viz-card__chart .rx-bg-fx__viz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.rx-viz-card__chart .rx-bg-fx__viz polyline,
.rx-viz-card__chart .rx-bg-fx__viz line {
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rx-viz-card__chart .rx-bg-fx__viz rect,
.rx-viz-card__chart .rx-bg-fx__viz circle { fill: currentColor; stroke: none; }
.rx-viz-card__chart .rx-bg-fx__viz .rx-bg-fx__node-line { stroke-width: 1; opacity: 0.5; }
.rx-viz-card__chart .rx-bg-fx__osc-slow { opacity: 0.5; } .rx-viz-card__chart .rx-viz-guide {
stroke: rgba(255, 255, 255, 0.28);
stroke-width: 1;
stroke-dasharray: 4 4;
fill: none;
}
.rx-viz-card__chart .rx-viz-guide--last { stroke: rgba(255, 197, 110, 0.55); } .rx-viz-card--candles .rx-candle--up   { color: #3FBE74; }
.rx-viz-card--candles .rx-candle--down { color: #E06A6A; }
.rx-viz-card--depth .rx-depth-bid { fill: rgba(74, 222, 128, 0.55); }
.rx-viz-card--depth .rx-depth-ask { fill: rgba(255, 122, 122, 0.5); }
.rx-viz-card--oscillator { color: rgba(255, 255, 255, 0.55); }
.rx-viz-card--oscillator .rx-bg-fx__osc-fast { stroke: var(--rx-orange-300, #F08566); opacity: 1; }
.rx-viz-card--bars { color: rgba(255, 255, 255, 0.35); }
.rx-viz-card--bars .rx-viz-accent { fill: var(--rx-orange-300, #F08566); }
} @media (min-width: 1700px) {
.rx-live-float__slot { width: 360px; }
} @property --rx-par {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@keyframes rx-float-in { to { opacity: var(--rx-float-opacity, 0.55); }
} @keyframes rx-float-drift {
0%, 100% { translate: 0 0;           rotate: 0deg; }
25%      { translate: 9px -15px;     rotate: 0.8deg; }
50%      { translate: -7px -24px;    rotate: -0.5deg; }
75%      { translate: -11px 7px;     rotate: 0.6deg; }
}
@media (prefers-reduced-motion: reduce) {
.rx-live-float__slot { animation: none; opacity: var(--rx-float-opacity, 0.55); scale: var(--rx-float-scale, 0.9); }
}