body { background-color:#f8f9fa; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
    .app-header { background:#fff; padding:15px 0; box-shadow:0 2px 10px rgba(0,0,0,.05); position:sticky; top:0; z-index:1000; }
    .logo-container img { max-height:40px; }
    .search-area { background:linear-gradient(135deg,#0d6efd 0%,#0a58ca 100%); padding:25px 15px; color:#fff; border-radius:0 0 20px 20px; }
    .search-input-group { background:#fff; border-radius:50px; padding:5px; box-shadow:0 4px 15px rgba(13,110,253,.2); }
    .search-input-group .form-control { border:none; box-shadow:none; padding-left:20px; font-size:16px; background:transparent; }
    .search-input-group .btn-search { border-radius:50px !important; padding:10px 25px; font-weight:600; }
    .btn-filter,.btn-alphabet { color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.3); border-radius:20px; font-size:14px; padding:5px 15px; background:rgba(255,255,255,.1); }
    .adv-search-panel { display:none; margin-top:15px; background:rgba(255,255,255,.1); padding:15px; border-radius:12px; }
    .adv-search-panel label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; opacity:.9; }
    .alphabet-scroll { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:5px 2px; }
    .alpha-btn { flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:rgba(255,255,255,.85); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); cursor:pointer; text-decoration:none; }
    .alpha-btn:hover { background:rgba(255,255,255,.3); color:#fff; }
    .alpha-btn.active { background:#fff; color:#0d6efd; font-weight:bold; }
    .results-container { padding:15px; margin-top:10px; }
    .song-card { background:#fff; border-radius:12px; padding:15px; margin-bottom:15px; border:none; box-shadow:0 2px 8px rgba(0,0,0,.04); cursor:pointer; border-left:4px solid #dee2e6; text-decoration:none; display:block; color:inherit; }
    .song-card[data-genre*="pop"]{border-left-color:#0d6efd}
    .song-card[data-genre*="bolero"]{border-left-color:#dc3545}
    .song-card[data-genre*="rock"]{border-left-color:#212529}
    .song-card[data-genre*="indie"]{border-left-color:#20c997}
    .song-title { font-size:16px; font-weight:700; color:#212529; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:60px; }
    .song-meta { font-size:13px; color:#6c757d; }
    .genre-badge { position:absolute; top:15px; right:15px; font-size:11px; padding:4px 8px; border-radius:20px; background:#f1f3f5; color:#495057; font-weight:600; }
    .views-badge { position:absolute; bottom:15px; right:15px; font-size:11px; color:#6c757d; }
    .pagination { justify-content:center; flex-wrap:wrap; gap:5px; }
    .page-item .page-link { border-radius:8px; margin:0 2px; border:none; color:#495057; box-shadow:0 2px 5px rgba(0,0,0,.05); min-width:40px; text-align:center; font-weight:600; }
    .page-item.active .page-link { background-color:#0d6efd; }
    .skeleton-card { background:#fff; border-radius:12px; padding:15px; margin-bottom:15px; height:80px; position:relative; overflow:hidden; }
    .skeleton-card::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:shimmer 1.5s infinite; }
    @keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }