#fx-ticker{
 width:100%;
 overflow:hidden;
 background:#ffffff;
 border-top:1px solid #eef2f7;
 border-bottom:1px solid #eef2f7;
 font-family:system-ui,-apple-system,Segoe UI,Roboto;
 direction:ltr;
}

.fx-track{
 display:flex;
 gap:18px;
 padding:10px 0;
 white-space:nowrap;
 will-change:transform;
}

.fx-box{
 display:flex;
 align-items:center;
 gap:6px;
 padding:6px 14px;
 background:#f8fafc;
 border:1px solid #e5e7eb;
 border-radius:8px;
 font-size:13px;
 transition:.25s;
 flex-shrink:0;
}

.fx-box:hover{
 background:#f1f5f9;
}

.symbol{
 font-weight:600;
 color:#6b7280;
}

.price{
 font-weight:700;
 color:#111827;
 min-width:40px;
 font-variant-numeric:tabular-nums;
 text-align:right;
}

.arrow{
 font-size:11px;
 margin-left:-2px;
 width:12px;
 text-align:center;
}

.up{color:#16a34a}
.down{color:#dc2626}

.flash-up{animation:flashUp .4s}
.flash-down{animation:flashDown .4s}

@keyframes flashUp{
 from{background:#dcfce7}
 to{background:#f8fafc}
}

@keyframes flashDown{
 from{background:#fee2e2}
 to{background:#f8fafc}
}

.live-price{
 display:inline-flex;
 gap:4px;
 align-items:center;
 font-weight:600;
}

/* live price style */

.live-price .price{
 color:#ffffff;
 background:none !important;
}

.live-price .arrow.up{
 color:#16a34a;
 animation:arrowUp .4s ease;
}

.live-price .arrow.down{
 color:#dc2626;
 animation:arrowDown .4s ease;
}

@keyframes arrowUp{
 from{ transform:translateY(2px); opacity:.5;}
 to{ transform:translateY(0); opacity:1;}
}

@keyframes arrowDown{
 from{ transform:translateY(-2px); opacity:.5;}
 to{ transform:translateY(0); opacity:1;}
}