@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f1f5f9; 
    color: #1e293b; 
    overflow-x: hidden; 
}

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

.btn-toggle { 
    transition: all 0.3s ease; 
}

.btn-active { 
    background-color: #2563eb !important; 
    color: white !important; 
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4); 
    border-color: #2563eb !important;
}

.component-card { 
    background: white; 
    border-radius: 2rem; 
    border: 1px solid #e2e8f0; 
    overflow: hidden; 
}

.img-box { 
    background: #f8fafc; 
    aspect-ratio: 16/10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-bottom: 1px solid #f1f5f9; 
}

input[type=range] { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 10px; 
    background: #cbd5e1; 
    border-radius: 5px; 
    outline: none; 
}

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 24px; 
    height: 24px; 
    background: #2563eb; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 3px solid white; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}