/* --- THEME VARIABLES --- */
        :root {
            --bsky-card-bg: #4a2b32; 
            --bsky-post-bg: #1e1e1e;
            --bsky-text-color: #ffffff;
            --bsky-subtext-color: #dcbaba;
            --bsky-link-color: #ffcccc;
            --bsky-border: rgba(255,255,255,0.1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #121212;
            color: white;
            padding: 20px;
            line-height: 1.5;
            margin: auto;
            text-align: center;
            max-width: 600px;
        }

        /* --- CARD STYLING --- */
        #music-status-card, #latest-post-card {
            background-color: var(--bsky-card-bg);
            color: var(--bsky-text-color);
            border-radius: 12px;
            padding: 16px;
            margin: 20px auto;
            display: none; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            max-width: 500px;
            border: 1px solid var(--bsky-border);
            text-align: center;
        }

        .bsky-header {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--bsky-subtext-color);
            margin-bottom: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .bsky-header a {
            color: var(--bsky-subtext-color);
            text-decoration: none;
        }

        .bsky-content-body {
            margin-bottom: 12px;
            word-wrap: break-word;
            text-align: center;
        }

        /* --- POST IMAGE STYLING --- */
        .post-image {
            width: 100%;
            border-radius: 8px;
            margin: 10px auto 0 auto;
            border: 1px solid var(--bsky-border);
            display: block;
        }

        .bsky-trackname {
            font-weight: 700;
            font-size: 1.1rem;
            display: block;
            color: var(--bsky-text-color);
            text-decoration: none;
            margin-bottom: 2px;
        }

        .bsky-artist {
            color: var(--bsky-subtext-color);
            font-size: 0.95rem;
        }

        .bsky-footer {
            border-top: 1px solid var(--bsky-border);
            padding-top: 10px;
            margin-top: 12px;
            font-size: 0.8rem;
            color: var(--bsky-subtext-color);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        a { color: var(--bsky-link-color); }
        
        .error-msg {
            color: #ff6b6b;
            font-size: 0.9rem;
        }
        
        hr {
            border: none;
            border-top: 1px solid var(--bsky-border);
            margin: 20px 0;
        }

        /* Social button row */
        .social-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 12px 0 20px 0;
            justify-content: center;
        }

        .social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 8px 14px; /* keep expanded size by default */
            border-radius: 999px;
            background: rgba(255,255,255,0.04);
            color: var(--bsky-text-color);
            text-decoration: none;
            border: 1px solid var(--bsky-border);
            font-size: 0.95rem;
            flex: 0 0 auto; /* don't stretch; allow pushing */
            min-width: 44px;
            transition: all 0.2s ease;
        }
        
        .social-btn:hover {
            background: var(--btn-bg);
            border-color: var(--btn-border);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .social-btn i {
            width: 1.1em;
            text-align: center;
            font-size: 1.05em;
        }

        /* label hidden by default, revealed on hover */
        .social-btn .label {
            display: inline-block;
            /* always visible (no hover reveal) */
            opacity: 1;
            transform: translateX(0);
            margin-left: 8px;
            white-space: nowrap;
            color: inherit;
            font-weight: 600;
            font-size: 0.95rem;
            max-width: 180px;
            overflow: hidden;
            vertical-align: middle;
        }

    /* hover styles removed - buttons are static */

        /* brand color variables per button */
        .btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); }
        .btn-instagram { --btn-bg: #E1306C; --btn-border: rgba(225,48,108,0.5); }
        .btn-tangled { --btn-bg: #000000; --btn-border: rgba(107,114,128,0.4); }
        .btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); }
        .btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); }

        /* Screen-reader only text (keep for accessibility) */
        .sr-only {
            position: absolute !important;
            height: 1px; width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            white-space: nowrap;
        }