.exchange-dashboard{
  width:100%;
  max-width:360px;
  margin:20px auto;
}

.rate-row{
  margin-bottom:16px;
}

.rate-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:18px;
  font-weight:700;
  color:#fff;
}

.rate-value{
  font-size:18px;
  font-weight:800;
}
.market-status.open{
  background:rgba(16,185,129,.25);
}

.market-status.closed{
  background:rgba(239,68,68,.25);
}
.rate-bar{
  margin-top:7px;
  height:9px;
  background:rgba(255,255,255,0.25);
  border-radius:20px;
  overflow:hidden;
}

.rate-fill{
  height:100%;
  width:0%;
  background:#ffffff;
  border-radius:20px;
  transition:width 1s ease;
}

.graph-note{
  text-align:center;
  color:#ffffff;
  font-size:15px;
  margin-top:12px;
  font-weight:600;
}
.rate-change{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  opacity:.95;
}

.rate-change.up{
  color:#bbf7d0;
}

.rate-change.down{
  color:#fecaca;
}
/* ==========================
   TOOLXONE STATS SECTION
========================== */

.stats-section{
    max-width:1200px;
    margin:70px auto;
    padding:0 20px;
}

.stats-section h2{
    text-align:center;
    font-size:34px;
    color:#0f766e;
    margin-bottom:40px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.stat-card{
    background:#fff;
    border-radius:18px;
    padding:35px 20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.stat-icon{
    font-size:46px;
    margin-bottom:18px;
}

.stat-card h3{
    font-size:42px;
    color:#10b981;
    margin-bottom:10px;
}

.stat-card p{
    font-size:18px;
    color:#666;
    font-weight:600;
}
/* ==========================
   LOADING SKELETON
========================== */

.skeleton{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.22);
    color:transparent !important;
    border-radius:8px;
}

.skeleton::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    animation:skeletonLoading 1.4s infinite;
}

@keyframes skeletonLoading{
    100%{
        left:100%;
    }
}
.ticker-section{
    width:100%;
    overflow:hidden !important;
    background:#10b981;
    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(255,255,255,.15);
}

.ticker{
    width:100%;
    overflow:hidden !important;
    white-space:nowrap !important;
}

.ticker-content{
    display:flex !important;
    width:max-content !important;
    animation:tickerMove 35s linear infinite !important;
}

.ticker-content span{
    display:inline-block !important;
    white-space:nowrap !important;
    padding-right:80px !important;
    color:white !important;
    font-weight:700;
}

@keyframes tickerMove{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}