/* User Menu & Credits Display */

.user-menu {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-4) var(--space-8); background: var(--color-bg-hover);
    border-radius: var(--radius);
}

.user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.user-name {
    font-size: var(--font-size-md); color: var(--color-text-secondary);
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn-logout { padding: var(--space-4) var(--space-8); background: transparent; color: var(--color-text-muted); }
.btn-logout:hover { background: var(--color-bg-tertiary); color: var(--color-accent-danger); }

.user-credits {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-2) var(--space-8); background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--color-text-secondary);
}
.user-credits i { font-size: var(--font-size-sm); color: var(--color-accent-primary); }

.btn-add-credits {
    padding: 1px var(--space-4); background: transparent;
    color: var(--color-text-muted); font-size: var(--font-size-xs);
}
.btn-add-credits:hover { color: var(--color-accent-primary); }

.free-renders-display, .ai-requests-display {
    font-size: var(--font-size-base); color: var(--color-text-muted);
    background: var(--color-bg-primary); padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
}