@keyframes slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.toast {
    animation: slide-in 0.5s, fade-out 0.5s 2.5s forwards;
}

.time-range-btn {
    transition: all 0.2s ease;
}
.time-range-btn:active, 
.time-range-btn.active {
    background-color: rgba(59, 130, 246, 1);
    color: white;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

@media (max-width: 640px) {
    .time-range-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
}

#stockLabelContainer {
    transition: all 0.2s ease;
    border: 1px solid rgba(230, 230, 230, 0.5);
}

#stockLabelContainer:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#chartStockSymbol {
    font-size: 0.95rem;
    letter-spacing: 0.025em;
}

#chartStockPrice {
    transition: background-color 0.3s ease;
}

.price-up {
    background-color: rgba(52, 211, 153, 0.2) !important;
    color: rgb(6, 95, 70) !important;
}

.price-down {
    background-color: rgba(248, 113, 113, 0.2) !important;
    color: rgb(153, 27, 27) !important;
}