body { background: linear-gradient(120deg, #232526, #414345); color: #fff; font-family: 'Montserrat', Arial, sans-serif; margin:0; padding:0; }
.container { max-width:900px; margin:40px auto; padding:32px; background:rgba(30,30,30,0.85); border-radius:18px; box-shadow:0 8px 32px rgba(0,0,0,0.25); }
h1 { font-size:2.5rem; margin-bottom:0.5em; letter-spacing:2px; }
.spotify-widget { margin:32px 0; border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(30,215,96,0.15);} 
.songs-list { margin:32px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.song-card { background:#232526; border-radius:16px; padding:16px 12px 12px 12px; text-align:left; box-shadow:0 2px 12px rgba(30,215,96,0.10); display:flex; gap:16px; align-items:center; transition:transform .2s, box-shadow .2s; min-width:0; cursor:pointer; }
.song-card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 8px 32px rgba(30,215,96,0.18); background:#2a2d30; }
.song-cover { width:64px; height:64px; border-radius:10px; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,0.18); flex-shrink:0; }
.song-info { flex:1; min-width:0; }
.song-title { font-size:1.1rem; margin:0 0 4px 0; color:#1ed760; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-album { font-size:0.98rem; color:#b3b3b3; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-spotify { margin-top:4px; }
.song-actions { margin-top:6px; }
.play-btn { background:#1ed760; color:#000; border:none; border-radius:8px; padding:6px 10px; font-weight:700; cursor:pointer; }
.play-btn:hover { background:#1fdf64; }
.song-player { margin-top:8px; }
.audio-inline { display:flex; align-items:center; gap:10px; }
.audio-time { font-size:.85rem; color:#b3b3b3; }
.album-section { margin:48px 0 0 0; }
.albums-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; margin-top:18px; }
.album-card { background:#232526; border-radius:14px; padding:14px 10px 10px 10px; text-align:center; box-shadow:0 2px 10px rgba(30,215,96,0.10); transition:transform .2s, box-shadow .2s; cursor:pointer; }
.album-card:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 8px 24px rgba(30,215,96,0.18); background:#2a2d30; }
.album-cover { width:100px; height:100px; border-radius:10px; object-fit:cover; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,0.18); }
.album-title { font-size:1.05rem; color:#fff; font-weight:bold; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.album-year { font-size:0.95rem; color:#1ed760; margin-bottom:4px; }
.load-more { margin-top:16px; text-align:center; }
.load-more button { background:transparent; border:2px solid #1ed760; color:#1ed760; padding:8px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
.load-more button:hover { background:rgba(30,215,96,0.1); }
@media (max-width:600px){ .container { padding:10px; } h1 { font-size:1.5rem; } }
/* Credits FAB */
#sm-credits-fab{position:fixed;right:18px;bottom:18px;z-index:3000;display:none;align-items:center;gap:8px;pointer-events:none;font-family:'Montserrat',Arial,sans-serif;}
#sm-credits-fab .smc-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;text-decoration:none;font:600 13px/1.1 'Montserrat',system-ui,Arial,sans-serif;color:#e9eef7;background:linear-gradient(180deg,rgba(20,22,28,.92),rgba(9,10,12,.92));border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(8px);opacity:0;transition:transform .35s ease,opacity .35s ease,box-shadow .25s ease,border-color .25s ease;}
#sm-credits-fab.show .smc-btn{transform:none;opacity:1;}
#sm-credits-fab .smc-btn:hover{border-color:rgba(255,255,255,.18);box-shadow:0 14px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);}
#sm-credits-fab .smc-dot{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#ffc14f 0%,#ff7a59 55%,#ff3d3d 100%);box-shadow:0 0 8px rgba(255,122,89,.55);}
#sm-credits-fab .smc-txt{letter-spacing:.2px;}
#sm-credits-fab .smc-close{pointer-events:auto;margin-left:6px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e9eef7;line-height:1;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transform:translateY(8px);opacity:0;transition:transform .35s ease,opacity .35s ease,background .2s ease,border-color .2s ease;}
#sm-credits-fab.show .smc-close{transform:none;opacity:1;}
#sm-credits-fab .smc-close:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);}
@media (prefers-reduced-motion:reduce){#sm-credits-fab .smc-btn,#sm-credits-fab .smc-close{transition:none;}}