/* === GitHub Card === */
.bkbg-ghc-app {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.bkbg-ghc-card {
    border-radius: 16px;
    transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.bkbg-ghc-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px);
}

.bkbg-ghc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.bkbg-ghc-avatar {
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
}

.bkbg-ghc-avatar-placeholder {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #fff;
}

.bkbg-ghc-name-row {
    font-family: var(--bkbg-ghc-hd-font-family, inherit);
    font-size: var(--bkbg-ghc-hd-font-size-d, 16px);
    font-weight: var(--bkbg-ghc-hd-font-weight, 700);
    font-style: var(--bkbg-ghc-hd-font-style, normal);
    text-transform: var(--bkbg-ghc-hd-text-transform, none);
    line-height: var(--bkbg-ghc-hd-line-height-d, 1.3);
    letter-spacing: var(--bkbg-ghc-hd-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-hd-word-spacing-d, normal);
}

.bkbg-ghc-name-row a {
    text-decoration: var(--bkbg-ghc-hd-text-decoration, none);
    color: inherit;
}

.bkbg-ghc-name-row a:hover {
    text-decoration: underline;
}

.bkbg-ghc-handle {
    font-family: var(--bkbg-ghc-bd-font-family, inherit);
    font-size: var(--bkbg-ghc-bd-font-size-d, 13px);
    font-weight: var(--bkbg-ghc-bd-font-weight, 400);
    font-style: var(--bkbg-ghc-bd-font-style, normal);
    text-decoration: var(--bkbg-ghc-bd-text-decoration, none);
    text-transform: var(--bkbg-ghc-bd-text-transform, none);
    line-height: var(--bkbg-ghc-bd-line-height-d, 1.5);
    letter-spacing: var(--bkbg-ghc-bd-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-bd-word-spacing-d, normal);
    margin-top: 3px;
}

.bkbg-ghc-desc {
    font-family: var(--bkbg-ghc-bd-font-family, inherit);
    font-size: var(--bkbg-ghc-bd-font-size-d, 14px);
    font-weight: var(--bkbg-ghc-bd-font-weight, 400);
    font-style: var(--bkbg-ghc-bd-font-style, normal);
    text-decoration: var(--bkbg-ghc-bd-text-decoration, none);
    text-transform: var(--bkbg-ghc-bd-text-transform, none);
    line-height: var(--bkbg-ghc-bd-line-height-d, 1.65);
    letter-spacing: var(--bkbg-ghc-bd-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-bd-word-spacing-d, normal);
    margin-bottom: 14px;
}

.bkbg-ghc-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--bkbg-ghc-mt-font-family, inherit);
    font-size: var(--bkbg-ghc-mt-font-size-d, 13px);
    font-weight: var(--bkbg-ghc-mt-font-weight, 400);
    font-style: var(--bkbg-ghc-mt-font-style, normal);
    text-decoration: var(--bkbg-ghc-mt-text-decoration, none);
    text-transform: var(--bkbg-ghc-mt-text-transform, none);
    line-height: var(--bkbg-ghc-mt-line-height-d, 1.4);
    letter-spacing: var(--bkbg-ghc-mt-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-mt-word-spacing-d, normal);
}

.bkbg-ghc-lang {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bkbg-ghc-lang-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bkbg-ghc-topic {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 100px;
    text-decoration: none;
}

.bkbg-ghc-topic:hover {
    text-decoration: none;
    opacity: 0.85;
}

.bkbg-ghc-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.bkbg-ghc-stat {
    flex: 1;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.bkbg-ghc-stat-val {
    font-family: var(--bkbg-ghc-hd-font-family, inherit);
    font-size: var(--bkbg-ghc-hd-font-size-d, 16px);
    font-weight: var(--bkbg-ghc-hd-font-weight, 700);
    font-style: var(--bkbg-ghc-hd-font-style, normal);
    text-decoration: var(--bkbg-ghc-hd-text-decoration, none);
    text-transform: var(--bkbg-ghc-hd-text-transform, none);
    line-height: var(--bkbg-ghc-hd-line-height-d, 1.3);
    letter-spacing: var(--bkbg-ghc-hd-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-hd-word-spacing-d, normal);
    display: block;
}

.bkbg-ghc-stat-lbl {
    font-family: var(--bkbg-ghc-mt-font-family, inherit);
    font-size: var(--bkbg-ghc-mt-font-size-d, 11px);
    font-weight: var(--bkbg-ghc-mt-font-weight, 400);
    font-style: var(--bkbg-ghc-mt-font-style, normal);
    text-decoration: var(--bkbg-ghc-mt-text-decoration, none);
    text-transform: var(--bkbg-ghc-mt-text-transform, none);
    line-height: var(--bkbg-ghc-mt-line-height-d, 1.4);
    letter-spacing: var(--bkbg-ghc-mt-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-mt-word-spacing-d, normal);
    margin-top: 2px;
    display: block;
}

.bkbg-ghc-footer {
    margin-top: 12px;
    font-family: var(--bkbg-ghc-mt-font-family, inherit);
    font-size: var(--bkbg-ghc-mt-font-size-d, 12px);
    font-weight: var(--bkbg-ghc-mt-font-weight, 400);
    font-style: var(--bkbg-ghc-mt-font-style, normal);
    text-decoration: var(--bkbg-ghc-mt-text-decoration, none);
    text-transform: var(--bkbg-ghc-mt-text-transform, none);
    line-height: var(--bkbg-ghc-mt-line-height-d, 1.4);
    letter-spacing: var(--bkbg-ghc-mt-letter-spacing-d, normal);
    word-spacing: var(--bkbg-ghc-mt-word-spacing-d, normal);
}

/* Typography responsive */
@media (max-width: 1024px) {
    .bkbg-ghc-name-row,
    .bkbg-ghc-stat-val {
        font-size: var(--bkbg-ghc-hd-font-size-t, var(--bkbg-ghc-hd-font-size-d, 16px));
        line-height: var(--bkbg-ghc-hd-line-height-t, var(--bkbg-ghc-hd-line-height-d, 1.3));
        letter-spacing: var(--bkbg-ghc-hd-letter-spacing-t, var(--bkbg-ghc-hd-letter-spacing-d, normal));
        word-spacing: var(--bkbg-ghc-hd-word-spacing-t, var(--bkbg-ghc-hd-word-spacing-d, normal));
    }
    .bkbg-ghc-handle,
    .bkbg-ghc-desc {
        font-size: var(--bkbg-ghc-bd-font-size-t, var(--bkbg-ghc-bd-font-size-d, 14px));
        line-height: var(--bkbg-ghc-bd-line-height-t, var(--bkbg-ghc-bd-line-height-d, 1.5));
        letter-spacing: var(--bkbg-ghc-bd-letter-spacing-t, var(--bkbg-ghc-bd-letter-spacing-d, normal));
        word-spacing: var(--bkbg-ghc-bd-word-spacing-t, var(--bkbg-ghc-bd-word-spacing-d, normal));
    }
    .bkbg-ghc-meta-row,
    .bkbg-ghc-stat-lbl,
    .bkbg-ghc-footer {
        font-size: var(--bkbg-ghc-mt-font-size-t, var(--bkbg-ghc-mt-font-size-d, 11px));
        line-height: var(--bkbg-ghc-mt-line-height-t, var(--bkbg-ghc-mt-line-height-d, 1.4));
        letter-spacing: var(--bkbg-ghc-mt-letter-spacing-t, var(--bkbg-ghc-mt-letter-spacing-d, normal));
        word-spacing: var(--bkbg-ghc-mt-word-spacing-t, var(--bkbg-ghc-mt-word-spacing-d, normal));
    }
}
@media (max-width: 767px) {
    .bkbg-ghc-name-row,
    .bkbg-ghc-stat-val {
        font-size: var(--bkbg-ghc-hd-font-size-m, var(--bkbg-ghc-hd-font-size-t, var(--bkbg-ghc-hd-font-size-d, 16px)));
        line-height: var(--bkbg-ghc-hd-line-height-m, var(--bkbg-ghc-hd-line-height-t, var(--bkbg-ghc-hd-line-height-d, 1.3)));
        letter-spacing: var(--bkbg-ghc-hd-letter-spacing-m, var(--bkbg-ghc-hd-letter-spacing-t, var(--bkbg-ghc-hd-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-ghc-hd-word-spacing-m, var(--bkbg-ghc-hd-word-spacing-t, var(--bkbg-ghc-hd-word-spacing-d, normal)));
    }
    .bkbg-ghc-handle,
    .bkbg-ghc-desc {
        font-size: var(--bkbg-ghc-bd-font-size-m, var(--bkbg-ghc-bd-font-size-t, var(--bkbg-ghc-bd-font-size-d, 14px)));
        line-height: var(--bkbg-ghc-bd-line-height-m, var(--bkbg-ghc-bd-line-height-t, var(--bkbg-ghc-bd-line-height-d, 1.5)));
        letter-spacing: var(--bkbg-ghc-bd-letter-spacing-m, var(--bkbg-ghc-bd-letter-spacing-t, var(--bkbg-ghc-bd-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-ghc-bd-word-spacing-m, var(--bkbg-ghc-bd-word-spacing-t, var(--bkbg-ghc-bd-word-spacing-d, normal)));
    }
    .bkbg-ghc-meta-row,
    .bkbg-ghc-stat-lbl,
    .bkbg-ghc-footer {
        font-size: var(--bkbg-ghc-mt-font-size-m, var(--bkbg-ghc-mt-font-size-t, var(--bkbg-ghc-mt-font-size-d, 11px)));
        line-height: var(--bkbg-ghc-mt-line-height-m, var(--bkbg-ghc-mt-line-height-t, var(--bkbg-ghc-mt-line-height-d, 1.4)));
        letter-spacing: var(--bkbg-ghc-mt-letter-spacing-m, var(--bkbg-ghc-mt-letter-spacing-t, var(--bkbg-ghc-mt-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-ghc-mt-word-spacing-m, var(--bkbg-ghc-mt-word-spacing-t, var(--bkbg-ghc-mt-word-spacing-d, normal)));
    }
}

/* Loading / error states */
.bkbg-ghc-loading,
.bkbg-ghc-error {
    padding: 32px;
    text-align: center;
    font-size: 14px;
    border-radius: 16px;
}

.bkbg-ghc-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #58a6ff;
    border-radius: 50%;
    animation: bkbg-ghc-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes bkbg-ghc-spin {
    to { transform: rotate(360deg); }
}

/* Lang color map */
.bkbg-ghc-lang-dot[data-lang="JavaScript"] { background: #f1e05a; }
.bkbg-ghc-lang-dot[data-lang="TypeScript"] { background: #3178c6; }
.bkbg-ghc-lang-dot[data-lang="Python"]     { background: #3572A5; }
.bkbg-ghc-lang-dot[data-lang="PHP"]        { background: #4F5D95; }
.bkbg-ghc-lang-dot[data-lang="Ruby"]       { background: #701516; }
.bkbg-ghc-lang-dot[data-lang="Go"]         { background: #00ADD8; }
.bkbg-ghc-lang-dot[data-lang="Rust"]       { background: #dea584; }
.bkbg-ghc-lang-dot[data-lang="CSS"]        { background: #563d7c; }
.bkbg-ghc-lang-dot[data-lang="HTML"]       { background: #e34c26; }