.oph-spotify {
    --oph-spotify-accent: #1DB954;
    --oph-spotify-bg: #121212;
    --oph-spotify-border: #2a2a2a;
    --oph-spotify-text: #f2f2f2;

    background: var(--oph-spotify-bg);
    border: 1px solid var(--oph-spotify-border);
    border-radius: 12px;
    padding: 20px;
    margin: 1.5em 0;
    max-width: 100%;
}

.oph-spotify[data-theme="light"] {
    --oph-spotify-bg: #ffffff;
    --oph-spotify-border: #e5e5e5;
    --oph-spotify-text: #1a1a1a;
}

.oph-spotify-title {
    margin: 0 0 14px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--oph-spotify-text);
    letter-spacing: 0.01em;
}

.oph-spotify-frame-wrap {
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.oph-spotify-frame {
    display: block;
    border: none;
}

.oph-spotify-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 18px;
    background: var(--oph-spotify-accent);
    color: #0b0b0b;
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.oph-spotify-button:hover {
    background: #1ed760;
    transform: translateY(-1px);
    color: #0b0b0b;
}

.oph-spotify-button svg {
    flex-shrink: 0;
}

.oph-spotify-audio-player {
    display: block;
    width: 100%;
    accent-color: var(--oph-spotify-accent);
}

@media (max-width: 600px) {
    .oph-spotify {
        padding: 16px;
    }
}