.root {
    -fx-background-color: #FFF0F5;
    -fx-font-family: "DejaVu Sans", "Segoe UI", sans-serif;
}

.title {
    -fx-font-size: 22px;
    -fx-font-weight: bold;
    -fx-text-fill: #6B1FA3;
}

.top-btn {
    -fx-background-color: transparent;
    -fx-text-fill: #6B1FA3;
    -fx-font-weight: bold;
    -fx-padding: 8 16;
    -fx-background-radius: 6;
    -fx-cursor: hand;
}

.top-btn:hover {
    -fx-background-color: #FCFAFF;
}

.playing-track {
    -fx-text-fill: #6B1FA3;
    -fx-alignment: LEFT_CENTER;
}

.track-box {
    -fx-background-color: #FCFAFF;
    -fx-padding: 20 20;
    -fx-spacing: 10;
    -fx-alignment: CENTER;
    -fx-background-radius: 5;
    -fx-border-radius: 5;
    -fx-border-color: transparent;
    -fx-border-width: 2;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 8, 0, 0, 4);
    -fx-cursor: hand;
}

.track-box:hover {
    -fx-border-color: #A020F0;
    -fx-effect: dropshadow(gaussian, rgba(76, 175, 80, 0.5), 16, 0, 0, 6);
}

.track-box:hover .track-name {
    -fx-font-weight: bold;
}

.track-name {
    -fx-font-size: 20px;
    -fx-font-weight: normal;
    -fx-text-fill: #6B1FA3;
}

.artist-name {
    -fx-font-size: 14px;
    -fx-font-weight: normal;
    -fx-text-fill: #A020F0;
}

.tracks-vbox {
    -fx-background-color: #FFF0F5;
    -fx-border-color: #FFF0F5;
    -fx-border-width: 1;
    -fx-padding: 10 10;
}

.p-and-a-btn {
    -fx-background-color: transparent;
    -fx-text-fill: #6B1FA3;
    -fx-font-size: 20px;
    -fx-font-weight: bold;
    -fx-padding: 10 10;
    -fx-background-radius: 4;
    -fx-cursor: hand;
}

.p-and-a-btn:hover {
    -fx-scale-x: 1.3;
    -fx-scale-y: 1.3;
}

.duration {
    -fx-font-size: 14px;
    -fx-font-weight: normal;
    -fx-text-fill: #A020F0;
}

.scroll-pane {
    -fx-background-color: #FFF0F5;
    -fx-border-color: #FFF0F5;
}
