.crypto-wrap{
    background:#0f172a;
    color:#e2e8f0;
    padding:20px;
    border-radius:12px;
}

select,
button{
    margin:5px;
    padding:6px 10px;
    background:#1e293b;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:15px;
}

.box{
    background:#1e293b;
    padding:12px;
    border-radius:10px;
}

.tf-btn.active{
    background:#3b82f6 !important;
    box-shadow:0 0 0 2px #3b82f666;
}

.price-up{
    color:#22c55e;
    animation:flashG .3s;
}

.price-down{
    color:#ef4444;
    animation:flashR .3s;
}

.price-neutral{
    color:#94a3b8;
}

@keyframes flashG{
    0%{background:#22c55e33}
    100%{background:transparent}
}

@keyframes flashR{
    0%{background:#ef444433}
    100%{background:transparent}
}

.badge{
    padding:6px 10px;
    margin:4px;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    display:inline-block;
}

.g{
    background:#16c784;
    color:#000;
}

.r{
    background:#ea3943;
    color:#fff;
}

.b{
    background:#3b82f6;
    color:#fff;
}

.bar-wrap{
    height:18px;
    background:#222;
    border-radius:6px;
    margin-top:5px;
    overflow:hidden;
}

.buy-bar{
    background:#22c55e;
    height:100%;
}

.sell-bar{
    background:#ef4444;
    height:100%;
}

canvas{
    width:100%;
    height:100px;
    background:#0b1220;
    border-radius:6px;
}

#fundingTooltip,
#oiTooltip{
    position:absolute;
    background:#000;
    color:#fff;
    padding:5px 8px;
    font-size:11px;
    border-radius:4px;
    display:none;
    pointer-events:none;
    z-index:999;
}

.feed{
    max-height:300px;
    overflow:auto;
    margin-top:10px;
}

.feed-item{
    padding:6px 8px;
    border-radius:6px;
    margin-bottom:6px;
    font-size:12px;
    display:flex;
    justify-content:space-between;
}

.buy-feed{
    background:#14532d;
}

.sell-feed{
    background:#7f1d1d;
}

small{
    opacity:.6;
    font-size:11px;
    margin-left:4px;
}

#tv_chart{
    margin-top:20px;
}

hr{
    margin:10px 0;
    opacity:.2;
}

@media(max-width:900px){
    .grid{
        grid-template-columns:1fr;
    }
}

/* =========================
FEAR GREED
========================= */

.fear-wrap{
    display:flex;
    justify-content:center;
    margin-top:10px;
}

.fear-gauge{
    position:relative;
    width:180px;
    height:180px;
}

.fear-gauge svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}

.fear-bg{
    fill:none;
    stroke:#0b1220;
    stroke-width:10;
}

.fear-progress{
    fill:none;
    stroke-width:10;
    stroke-linecap:round;
    stroke-dasharray:327;
    stroke-dashoffset:163;
    transition:all .6s ease;
    stroke:url(#fearGradient);
}

.fear-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}

#fearValue{
    font-size:42px;
    font-weight:700;
    color:#fff;
}

.fear-label{
    text-align:center;
    margin-top:8px;
    font-size:18px;
    font-weight:700;
}

.sentiment-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:18px;
}

.sentiment-card{
    background:#0b1220;
    padding:12px;
    border-radius:10px;
    text-align:center;
}

.sentiment-card small{
    display:block;
    margin-bottom:5px;
    opacity:.7;
}

#marketSentiment,
#marketTrend,
#marketVolatility{
    font-size:18px;
    font-weight:700;
}

.bullish{
    color:#22c55e;
}

.bearish{
    color:#ef4444;
}

.neutral{
    color:#eab308;
}