body {
    background-color: #121212;
    color: #E0E0E0;
    font-family: 'Poppins', sans-serif;
}

.navbar-brand, .nav-link, .card-title, h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF;
}

.navbar {
    background-color: #1E1E1E;
}

.bottom-nav {
    background-color: #1E1E1E;
    border-top: 1px solid #333;
}

.bottom-nav .nav-link {
    color: #E0E0E0;
    text-align: center;
}

.bottom-nav .nav-link.active,
.bottom-nav .nav-link:hover {
    color: #00AEEF;
}

.search-bar, .form-control {
    background-color: #2F2F2F;
    border: 1px solid #444;
    color: #FFFFFF;
}
.search-bar::placeholder, .form-control::placeholder {
    color: #888;
}

.form-control:focus {
    background-color: #2F2F2F;
    border-color: #00AEEF;
    color: #FFFFFF;
    box-shadow: 0 0 0 0.25rem rgba(0, 174, 239, 0.25);
}

.form-card {
    background-color: #1E1E1E;
    border: 1px solid #333;
    border-radius: 0.5rem;
}

.category-card {
    background-color: #1E1E1E;
    border: 1px solid #333;
    border-radius: 0.5rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 174, 239, 0.2);
    border-color: #00AEEF;
}

.category-card .card-body {
    text-align: center;
}

.playlist-card {
    background-color: #1E1E1E;
    border: 1px solid #333;
    border-radius: 0.5rem;
}

.btn-primary {
    background-color: #00AEEF;
    border-color: #00AEEF;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #008fbf;
    border-color: #008fbf;
}

.accent-text {
    color: #00AEEF;
}