﻿.btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 10px !important;
    font-size: 0.92rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--app-accent), var(--app-accent-dark)) !important;
    border-color: var(--app-accent-dark) !important;
    color: var(--app-on-accent) !important;
    box-shadow: var(--app-shadow-sm);
    transition: var(--app-transition);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background: linear-gradient(180deg, var(--app-accent-dark), var(--app-accent-dark)) !important;
        border-color: var(--app-accent-dark) !important;
        color: var(--app-on-accent) !important;
        box-shadow: 0 0 0 3px var(--app-accent-glow) !important;
        transform: translateY(-1px);
    }

.btn-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 10px !important;
    font-size: 0.92rem;
    font-weight: 700;
    background: var(--app-surface-solid) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-sm);
    transition: var(--app-transition);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background: var(--app-surface-muted) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border-strong) !important;
        transform: translateY(-1px);
    }

.btn-outline-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 10px !important;
    font-size: 0.92rem;
    font-weight: 700;
    background: transparent !important;
    color: var(--app-accent) !important;
    border: 1px solid var(--app-accent) !important;
    transition: var(--app-transition);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background: var(--app-accent-soft) !important;
        color: var(--app-accent-dark) !important;
        border-color: var(--app-accent) !important;
    }
