* {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}

body {
    background: #020617;
}

.sidebar {
    transition: transform .25s ease;
}

.tab-button {
    transition: all .15s ease;
}

.tab-button.active {
    background: #334155;
    color: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.online-dot {
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .45);
    }

    50% {
        opacity: .4;
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

textarea {
    resize: vertical;
}

input[type="range"] {
    accent-color: #0284c7;
}