/* ── Buttons (all modules + auth) ── */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.22);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

button:hover,
.btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 18px rgba(var(--color-primary-rgb), 0.28);
}

button:active,
.btn:active {
    transform: translateY(1px);
}

button:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.28), 0 2px 10px rgba(var(--color-primary-rgb), 0.22);
}

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

button.is-busy,
.btn.is-busy {
    position: relative;
    pointer-events: none;
}

button.is-busy::after,
.btn.is-busy::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: btn-spin 0.7s linear infinite;
}

.btn--secondary {
    background: var(--color-bg-surface-hover);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

button.btn--secondary {
    background: var(--color-bg-surface-hover);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.btn--secondary:hover {
    border-color: var(--color-border-strong);
    filter: none;
}

button.btn--secondary:hover {
    filter: none;
    box-shadow: none;
}

.btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.btn--ghost:hover {
    color: var(--color-text);
    background: var(--color-bg-surface-hover);
}