@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
    .container { padding: 12px 8px; }

    .search-input { font-size: 14px; padding: 10px 14px; }
    .search-btn { padding: 10px 16px; font-size: 13px; }

    .platform-filters { gap: 6px; }
    .filter-btn { padding: 5px 12px; font-size: 12px; }

    .song-item { gap: 8px; padding: 8px 6px; }
    .song-index { width: 24px; font-size: 12px; }
    .song-cover { width: 38px; height: 38px; }
    .song-cover-placeholder { width: 38px; height: 38px; }
    .song-name { font-size: 13px; }
    .song-artist { font-size: 11px; }
    .song-duration { display: none; }
    .action-btn { width: 30px; height: 30px; font-size: 12px; }

    .player-bar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        gap: 6px;
    }
    .player-info {
        width: auto;
        flex: 1;
        min-width: 0;
    }
    .player-cover { width: 40px; height: 40px; }
    .player-controls { gap: 4px; }
    .player-btn { width: 32px; height: 32px; font-size: 14px; }
    .play-btn { width: 38px; height: 38px; font-size: 16px; }
    .player-progress {
        flex-basis: 100%;
        order: 3;
        gap: 8px;
    }
    .time { font-size: 11px; width: 36px; }

    .platform-tabs { gap: 6px; }
    .platform-tab { padding: 8px 16px; font-size: 13px; }

    .method-tabs { flex-wrap: wrap; }
    .method-tab { padding: 6px 14px; font-size: 13px; }

    .qr-image { width: 200px; height: 200px; }

    .login-page h1 { font-size: 22px; }

    .lyrics-panel {
        width: 100%;
        top: 56px;
        height: calc(100vh - 56px - 72px);
        transition: right 0.3s ease;
    }
    .lyrics-panel.hidden {
        transform: none;
        right: -100%;
    }
    .lyrics-panel.hidden .lyrics-tab {
        position: fixed;
        right: 12px;
        bottom: 84px;
        left: auto;
        top: auto;
        transform: none;
        border: 1px solid var(--border);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }
    .lyrics-panel:not(.hidden) .lyrics-tab {
        position: absolute;
        left: auto;
        right: 8px;
        bottom: 8px;
        top: auto;
        transform: none;
        border: 1px solid var(--border);
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }
    .lyrics-close {
        display: block !important;
        font-size: 20px;
        padding: 6px 12px;
        color: var(--text-primary);
        background: var(--bg-card);
        border-radius: 6px;
    }
    .lyrics-content {
        padding-bottom: 56px;
    }

    .playlist-panel {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        bottom: 72px;
        height: 50vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .favorites-panel {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        bottom: 72px;
        height: 50vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}