.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fs);
    font-weight: 700;
    font-size: 15px;
    padding: 16px 24px;
    border-radius: var(--r);
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
}

.btn--primary {
    background: linear-gradient(180deg, var(--teal-bright), var(--teal-deep));
    color: #fff;
    box-shadow: 0 8px 22px rgba(17, 94, 89, .22);
}

.btn--primary:hover {
    box-shadow: 0 14px 30px rgba(17, 94, 89, .3);
}

.btn--ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--line-2);
}

.btn--ghost:hover {
    border-color: var(--teal-light);
    color: var(--teal);
}

.btn--white {
    background: #fff;
    color: var(--teal-deep);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.btn--white:hover {
    background: #EFFBF9;
}

.btn--ghost-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.btn--ghost-dark:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.btn--lg {
    font-size: 16px;
    padding: 16px 32px;
}

.btn--small {
    font-size: 15px;
    padding: 12px 20px;
}

.btn--block {
    width: 100%;
    justify-content: center;
}

.btn--loading {
    opacity: .65;
    pointer-events: none;
    cursor: progress;
}

.btn--shine {
    position: relative;
    overflow: hidden;
}

.btn--shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    opacity: 0;
    pointer-events: none;
    animation: btn-shine 1.1s ease 1.4s 1;
}

@keyframes btn-shine {
    0% { left: -60%; opacity: 1; }
    100% { left: 130%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .btn--shine::after {
        animation: none;
    }
}