.search-page-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.search-tabs { display: flex; gap: 36px; border-bottom: 1px solid #eef0f2; padding-bottom: 10px; margin-bottom: 24px; }
.tab-item { font-size: 16px; color: #666; cursor: pointer; position: relative; font-weight: 400; transition: color 0.2s ease; }
.tab-item:hover, .tab-item.active { color: #1a73e8; }
.tab-item.active { font-weight: 600; }
.tab-item.active::after { content: ""; position: absolute; bottom: -11px; left: 0; width: 100%; height: 3px; background-color: #1a73e8; border-radius: 2px; }

.content-panel { display: none; }
.content-panel.active { display: block; animation: srFadeIn 0.3s ease-in-out; }
@keyframes srFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.track-list-header, .track-row { display: grid; grid-template-columns: 50px 4fr 2fr 2.5fr 80px; align-items: center; padding: 12px 16px; }
.track-list-header { font-size: 13px; color: #888; border-bottom: 1px solid #f0f0f4; font-weight: 500; }
.col-duration { text-align: right; padding-right: 12px; }

.track-row { border-radius: 8px; margin-bottom: 4px; cursor: pointer; background: #fff; transition: all 0.2s; }
.track-row:hover { background: #f1f3f8; }
.track-row.disabled { cursor: default; opacity: 0.45; }
.track-row.disabled:hover { background: #fff; }
.cell-index { color: #bbb; font-size: 14px; }
.cell-title-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-title-block img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.cell-title-block img.disabled-img { filter: grayscale(1); }
.song-name-container { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.song-name { font-size: 14.5px; font-weight: 500; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-tns { font-size: 12px; color: #999; }
.badge-group { display: flex; gap: 4px; margin-top: 2px; }
.badge { font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: bold; transform: scale(0.9); transform-origin: left; }
.badge-vip { background: #ffeceb; color: #ff3b30; border: 1px solid #fcc; }
.badge-sq { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
.song-reason { font-size: 10px; color: #b91c1c; background: #fef2f2; padding: 1px 6px; border-radius: 8px; }

.cell-artist, .cell-album { font-size: 14px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-duration { text-align: right; font-size: 13px; color: #999; padding-right: 12px; }

.artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; }
.artist-card { background: #fff; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.02); cursor: pointer; transition: transform 0.2s; }
.artist-card:hover { transform: translateY(-4px); }
.artist-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 1px solid #eee; }
.artist-name { font-size: 15px; font-weight: 500; color: #222; }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
.album-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.02); cursor: pointer; transition: transform 0.2s; }
.album-card:hover { transform: translateY(-4px); }
.album-cover-box { position: relative; width: 100%; padding-top: 100%; }
.album-cover-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.album-info { padding: 12px; }
.album-title { font-size: 14px; font-weight: 500; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.album-singer { font-size: 12px; color: #777; }

.playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.playlist-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.02); cursor: pointer; }
.playlist-card a { text-decoration: none; color: inherit; }
.playlist-cover-wrapper { position: relative; width: 100%; padding-top: 100%; }
.playlist-cover-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.play-count-tag { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.4); color: #fff; padding: 3px 8px; border-radius: 20px; font-size: 11px; backdrop-filter: blur(4px); }
.playlist-desc { padding: 12px; font-size: 13.5px; color: #333; line-height: 1.4; height: 50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.search-empty { text-align: center; padding: 60px 0; color: #999; font-size: 14px; }
.search-results-header { margin-bottom: 16px; font-size: 14px; color: #888; }
.search-results-header strong { color: #111; }