* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #121212; color: #ffffff; padding: 30px; height: 100vh; overflow-y: auto; }

/* Scrollbar customizada */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

.section-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #ffffff; }

/* Grid Padrão (PC/Tablet) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.music-card {
    background-color: #181818;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
    cursor: pointer;
    position: relative;
}
.music-card:hover { background-color: #282828; }

.cover-container { position: relative; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 15px; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.cover-container img { width: 100%; height: 100%; object-fit: cover; }

.play-btn-card {
    position: absolute; bottom: 10px; right: 10px;
    width: 45px; height: 45px; border-radius: 50%;
    background-color: #ef5466; color: white; border: none;
    font-size: 20px; display: flex; justify-content: center; align-items: center;
    cursor: pointer; opacity: 0; transform: translateY(10px);
    transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.music-card:hover .play-btn-card { opacity: 1; transform: translateY(0); }
.play-btn-card:hover { background-color: #d43f50; transform: scale(1.05) translateY(0) !important; }

.track-title { font-size: 15px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.track-artist { font-size: 13px; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.track-duration { font-size: 12px; color: #888; }
.add-playlist-btn { background: none; border: 1px solid #b3b3b3; color: #b3b3b3; border-radius: 20px; padding: 2px 10px; font-size: 12px; cursor: pointer; transition: 0.2s; }
.add-playlist-btn:hover { color: white; border-color: white; background: #333; }

/* ================= SMARTPHONES ================= */
@media screen and (max-width: 768px) {
    body { padding: 15px; }
    
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 15px;
    }
    
    .music-card { padding: 10px; }
    .cover-container { margin-bottom: 10px; }
    .track-title { font-size: 13px; }
    .track-artist { font-size: 11px; }
    
    .play-btn-card {
        width: 35px; height: 35px; font-size: 16px;
        opacity: 1; transform: none; 
        bottom: 5px; right: 5px;
    }
    
    .add-playlist-btn { font-size: 10px; padding: 2px 6px; }
}

/* ================= TEMA CLARO ================= */
body.light-theme { background-color: #fafafa; color: #121212; }
body.light-theme .section-title { color: #121212; }
body.light-theme .music-card { background-color: #ffffff; border: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
body.light-theme .music-card:hover { background-color: #f5f5f5; }
body.light-theme .track-artist { color: #666; }
body.light-theme .track-duration { color: #888; }
body.light-theme #emptyStateTitle { color: #121212 !important; }
body.light-theme .add-playlist-btn { border-color: #999; color: #666; }
body.light-theme .add-playlist-btn:hover { background: #eee; color: #121212; border-color: #121212; }