html, body { height: 100%; margin:0; padding:0; }
body { display:flex; flex-direction:column; min-height:100vh; background:#121212; color:#eee; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.navbar { background:#1b1b28; }
.navbar-brand { color:#00ff7f !important; font-weight:700; font-size:1.4rem; }

.container { flex:1; max-width:1200px; margin:auto; padding:20px; }

.section-title { margin:40px 0 20px; font-size:22px; font-weight:600; color:#00ff7f; display:flex; justify-content:space-between; align-items:center; }
.view-all { font-size:14px; color:#00ff7f; cursor:pointer; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }

.card { background:#1f1f2e; border-radius:12px; padding:15px; transition:.3s, box-shadow .3s; box-shadow:0 6px 15px rgba(0,0,0,.4); cursor:pointer; position:relative; }
.card:hover { transform: translateY(-5px); box-shadow: 0 0 8px #00ff7f, 0 0 12px #00ff7f, 0 6px 12px rgba(0,0,0,0.5); }
.card img {
    width: 200px;        /* fixed width */
    height: 200px;       /* fixed height */
    object-fit: cover;   /* crop/scale image to fit */
    border-radius: 8px;
    margin: 0 auto 10px; /* center horizontally and keep bottom margin */
    display: block;
}
.card h5 { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#00ff7f; margin-bottom:5px; text-align:center; }

.song-card { position: relative; }
.play-overlay {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    pointer-events: none;

    /* Softer styling */
    background: rgba(0, 0, 0, 0.25);          /* much softer dark overlay */
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);  /* very subtle glow */
    transition: background 0.3s, transform 0.3s;
}

.card:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.35);          /* slightly stronger on hover but still soft */
}
.song-card .song-artist {
    text-align: center;
    font-size: 0.9rem;
    color: #fff !important;  /* force white */
    margin: 2px 0 5px 0;
}

.download-btn { margin-top:5px; background:#27ae60; color:#fff; border:none; border-radius:6px; padding:4px 8px; cursor:pointer; font-weight:bold; font-size:12px; display:block; width:auto; text-align:center; margin:5px auto 0; transition:.3s; }
.download-btn:hover { background:#2ecc71; }

#playerBar { position:fixed; bottom:0; left:0; width:100%; background:#1f1f2e; color:#fff; display:flex; align-items:center; padding:8px 15px; box-shadow:0 -4px 15px rgba(0,0,0,0.6); z-index:999; gap:10px; font-family:'Segoe UI', sans-serif; display:none; }
#playerBar img { width:50px; height:50px; object-fit:cover; border-radius:6px; }
#playerInfo { flex:1; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
#playerInfo .song-name { font-weight:600; color:#00ff7f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#playerInfo .artist-name { font-size:13px; color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#playerControls { display:flex; align-items:center; gap:10px; }
#playerControls button { background:#27ae60; border:none; color:#fff; width:35px; height:35px; border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:.3s; }
#playerControls button:hover { box-shadow:0 0 10px #27ae60; }
#playerProgressContainer { flex:1; height:5px; background:#333; border-radius:5px; cursor:pointer; margin:0 10px; }
#playerProgress { height:100%; width:0; background:#27ae60; border-radius:5px; transition: width 0.1s linear; }

footer { text-align:center; padding:20px; margin-top:40px; background:#1b1b28; color:#00ff7f; font-weight:600; }
@media (max-width:768px){ .grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:15px; } #playerBar { flex-direction:column; align-items:flex-start; padding:10px; gap:8px; } #playerProgressContainer { width:100%; margin:5px 0; } }