/* Basic Site Styles */
:root {
    --text-secondary: #b3b3b3;
    --spotify-green: #1db954;
    --transition-fast: 0.2s ease;
}

body {
    background-color: #121212;
    color: white;
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Header & Nav Styles */
header {
    background: #000;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn {
    text-decoration: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
}

/* PWA Button Styles */
.mobile-action-icon {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: var(--transition-fast);
    cursor: pointer;
}

.mobile-action-icon:hover {
    color: var(--spotify-green);
    transform: scale(1.1);
}

.pwa-install-btn {
    cursor: pointer;
}

/* Content Styles */
main {
    padding: 40px;
    text-align: center;
}

/* Hide mobile button on desktop and vice versa for demo purposes if needed, 
   but for now we just follow the prompt's structure */
@media (min-width: 768px) {
    #pwaInstallBtn { display: none !important; } /* forceful hide if we want distinct mobile/desktop */
}
@media (max-width: 767px) {
    .pwa-install-btn.btn { display: none !important; }
}