.spotify-app {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 80px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #4d2626 0%,
            #222222 20%,
            #121212 40%,
            #121212 100%
        );

    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    padding-bottom: 160px;

    box-sizing: border-box;

}

.spotify-header {

    padding: 20px 16px 10px;

}

.spotify-header h1 {

    margin: 0 0 15px;

    color: white;

    font-size: 28px;

    font-weight: 700;

}

.header-buttons {

    display: flex;

    gap: 10px;

}

.header-buttons button {

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

    background: #2b2b2b;

    color: white;

    cursor: pointer;

}

.quick-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

    padding: 0 16px;

}

.quick-card {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #282828;

    border-radius: 6px;

    overflow: hidden;

    min-height: 56px;

    cursor: pointer;

}

.quick-card:hover {

    background: #343434;

}

.quick-card img {

    width: 56px;

    height: 56px;

    object-fit: cover;

    flex-shrink: 0;

}

.quick-card span {

    color: white;

    font-size: 14px;

    font-weight: 600;

}

.spotify-section {

    margin-top: 28px;

}

.spotify-section h2 {

    margin: 0 16px 12px;

    color: white;

    font-size: 22px;

    font-weight: 700;

}

.horizontal-scroll {

    display: flex;

    gap: 14px;

    overflow-x: auto;

    padding: 0 16px;

    scrollbar-width: none;

}

.horizontal-scroll::-webkit-scrollbar {

    display: none;

}

.playlist-card {

    width: 140px;

    flex-shrink: 0;

    cursor: pointer;

}

.playlist-card img {

    width: 140px;

    height: 140px;

    display: block;

    border-radius: 6px;

    object-fit: cover;

    transition: transform .15s ease;

}

.playlist-card:hover img {

    transform: scale(1.03);

}

.playlist-card span {

    display: block;

    margin-top: 8px;

    color: #b3b3b3;

    font-size: 14px;

    line-height: 1.3;

}

#miniPlayer {

    position: absolute;

    left: 8px;

    right: 8px;

    bottom: 110px;

    height: 64px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 12px;

    background: #2d2d2d;

    border-radius: 8px;

    z-index: 300;

    box-sizing: border-box;

}

#miniCover {

    width: 48px;

    height: 48px;

    border-radius: 4px;

    object-fit: cover;

    background: #444;

}

.mini-info {

    flex: 1;

    overflow: hidden;

}

#songTitle {

    color: white;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

#songArtist {

    color: #b3b3b3;

    font-size: 12px;

    margin-top: 3px;

}

#playPause {

    border: none;

    background: none;

    color: white;

    font-size: 28px;

    cursor: pointer;

}

.spotify-nav {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 50px;

    height: 55px;

    display: flex;

    justify-content: space-around;

    align-items: center;

    background: #121212;

    border-top: 1px solid #282828;

    z-index: 250;

}

.spotify-nav button {

    background: none;

    border: none;

    color: #b3b3b3;

    font-size: 14px;

    cursor: pointer;

}

.spotify-nav .nav-active {

    color: white;

}

#audioPlayer {

    display: none;

}

#homeButton {

    z-index: 500;

}