/* Featured Card Style */
.featured-card-style { 
    background: #2a2a2a; 
    padding: 16px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    cursor: pointer; 
    transition: background 0.3s, border-color 0.3s; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    max-width: 100%; 
    margin-bottom: 24px; 
}

.featured-card-style:hover { 
    background: #333; 
}

.featured-card-style.active-track { 
    border-color: var(--primary-color); 
    background: #333; 
}

.featured-icon { 
    font-size: 36px; 
    color: var(--primary-color); 
}

.featured-info { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

.featured-title { 
    font-weight: 700; 
    color: #fff; 
    font-size: 16px; 
    margin-bottom: 4px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.featured-artist { 
    color: var(--text-color-secondary); 
    font-size: 13px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.mobile-playlist-btn { 
    display: none; 
}

/* Playlist Selection */
.playlist-selection { 
    max-height: 300px; 
    overflow-y: auto; 
    margin-top: 10px; 
}

.playlist-selection-item, #open-create-playlist-from-modal { 
    padding: 15px; 
    margin-bottom: 10px; 
    background: var(--surface-highlight); 
    border-radius: 8px; 
    cursor: pointer; 
    transition: background 0.2s, transform 0.1s; 
    border: 1px solid transparent; 
    font-size: 15px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    color: var(--text-color); 
}

#open-create-playlist-from-modal { 
    border: 1px dashed var(--text-color-secondary); 
    background: transparent; 
    color: var(--primary-color); 
    font-weight: 600; 
}

.playlist-selection-item:hover, #open-create-playlist-from-modal:hover { 
    background: rgba(255, 215, 0, 0.1); 
    border-color: var(--primary-color); 
}

.playlist-selection-item:active { 
    transform: scale(0.98); 
}

/* Auth Styles */
.auth-overlay { 
    background: rgba(18, 18, 18, 0.85); 
    backdrop-filter: blur(8px); 
}

.auth-tabs { 
    display: flex; 
    margin-bottom: 20px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
}

.auth-tab { 
    flex: 1; 
    padding: 10px; 
    background: none; 
    border: none; 
    color: var(--text-color-secondary); 
    cursor: pointer; 
    font-size: 16px; 
    font-weight: bold; 
    border-bottom: 2px solid transparent; 
}

.auth-tab.active { 
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color); 
}

.auth-form { 
    display: none; 
}

.auth-form.active { 
    display: block; 
}

.auth-input { 
    width: 100%; 
    padding: 12px; 
    margin-bottom: 15px; 
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 8px; 
    color: #fff; 
    font-size: 16px; 
}

.auth-input:focus { 
    outline: none; 
    border-color: var(--primary-color); 
}

.auth-helper { 
    font-size: 13px; 
    color: var(--text-color-secondary); 
    margin-bottom: 10px; 
    display: block; 
}

.auth-error { 
    color: #ff6b6b; 
    background: rgba(255, 107, 107, 0.1); 
    padding: 10px; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    font-size: 14px; 
    display: none; 
}

.auth-suggestion { 
    color: var(--primary-color); 
    font-weight: bold; 
    margin-top: 5px; 
    display: block; 
}

.auth-header-toggle { 
    text-align: center; 
    margin-bottom: 15px; 
}

.auth-header-toggle button { 
    background: none; 
    border: none; 
    color: var(--primary-color); 
    font-size: 15px; 
    text-decoration: underline; 
    cursor: pointer; 
}

/* Botão Nova Playlist */
.playlist-header-buttons { 
    display: flex; 
    gap: 10px; 
    align-items: center; 
}

.new-playlist-btn { 
    background: var(--primary-color); 
    color: #000; 
    border: none; 
    border-radius: 500px; 
    padding: 8px 16px; 
    font-size: 14px; 
    font-weight: 700; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

.new-playlist-btn:hover { 
    background: #e5c100; 
    transform: scale(1.02); 
}

/* Subscription Modal */
#subscription-modal-content { 
    text-align: center; 
}

#subscription-modal-content p { 
    font-size: 16px; 
    margin: 20px 0; 
    color: var(--text-color-secondary); 
}

#subscription-modal-content strong { 
    color: var(--primary-color); 
    font-size: 18px; 
}

.sub-btn-group { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin-top: 20px; 
}

#delete-playlist-btn { 
    background: transparent; 
    border: 1px solid var(--text-color-secondary); 
    color: #fff; 
    padding: 8px 16px; 
    border-radius: 20px; 
    font-size: 14px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s; 
    margin-left: 10px; 
}

#delete-playlist-btn:hover { 
    background: #333; 
    color: #fff; 
    border-color: #fff; 
}

/* Install PWA Button */
.install-pwa-btn { 
    background: linear-gradient(135deg, #0096ff, #0066cc); 
    color: white; 
    border: none; 
    border-radius: 500px; 
    padding: 10px 20px; 
    font-size: 15px; 
    font-weight: 700; 
    cursor: pointer; 
    box-shadow: 0 4px 8px rgba(0, 150, 255, 0.5); 
    transition: all 0.3s ease; 
    margin-right: 15px; 
    display: none; 
    align-items: center; 
    gap: 8px; 
}

.mobile-pwa-banner { 
    display: none; 
    background: var(--primary-color); 
    padding: 12px 16px; 
    text-align: center; 
    border-bottom: 1px solid var(--surface-highlight); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    color: #000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    border-radius: 0 0 8px 8px; 
}

.mobile-pwa-banner-content { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    max-width: 600px; 
    margin: 0 auto; 
}

.mobile-pwa-text { 
    font-size: 16px; 
    font-weight: 600; 
    flex-grow: 1; 
    text-align: left; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.mobile-pwa-install-btn { 
    background: #000; 
    color: var(--primary-color); 
    border: none; 
    border-radius: 20px; 
    padding: 8px 16px; 
    font-size: 14px; 
    font-weight: 700; 
    cursor: pointer; 
    flex-shrink: 0; 
}