:root{--bg:#0f1724;--card:#0b1220;--accent:#9b5cff;--muted:#9aa4b2;color-scheme:dark}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#071021);color:#e6eef8;margin:0;}
.container{max-width:980px;margin:28px auto;padding:0 16px}
.site-header{display:flex;align-items:center;gap:14px;padding:22px 16px}
.logo{width:58px;height:58px;object-fit:cover;border-radius:8px}
.subtitle{margin:0;color:var(--muted)}
.controls{display:flex;gap:8px;align-items:center;margin:12px 0}
#searchInput{flex:1;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:18px}
.song-card{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.song-title{margin:0 0 6px}
.song-meta{color:var(--muted);margin:0 0 8px;font-size:13px}
.view-btn{margin-top:8px;padding:8px 10px;border-radius:8px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.detail{position:fixed;right:24px;top:80px;width:420px;max-width:calc(100% - 48px);background:#071428;padding:18px;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.8)}
.hidden{display:none}
.lyrics{white-space:pre-wrap;margin-top:12px}
.site-footer{text-align:center;padding:18px;color:var(--muted)}
@media(max-width:640px){.site-header{flex-direction:column;align-items:flex-start}}
.song-card{ display:flex; gap:12px; align-items:flex-start; }
.song-thumb{ width:96px; height:96px; object-fit:cover; border-radius:8px; flex-shrink:0; background:#071428; }
.song-body{ flex:1; }

.detail-image{ width:100%; max-height:260px; object-fit:cover; border-radius:10px; margin-bottom:12px; }