@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.waveform {
    height: 60px;
    background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.waveform::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(99, 102, 241, 0.1) 2px,
        rgba(99, 102, 241, 0.1) 4px
    );
    animation: wave 1s linear infinite;
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(20px); }
}

.chart-bar {
    transition: height 0.3s ease;
}