.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    min-height: 2.25rem;
    padding: var(--app-space-2) var(--app-space-4);
    border: 1px solid rgba(45, 47, 52, 0.35);
    border-radius: var(--app-radius-lg);
    font-family: var(--app-font-family-base);
    font-size: var(--app-font-size-base);
    font-weight: var(--app-font-weight-medium);
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--app-motion-base) var(--app-motion-ease),
        background var(--app-motion-base) var(--app-motion-ease),
        color var(--app-motion-base) var(--app-motion-ease),
        border-color var(--app-motion-base) var(--app-motion-ease),
        box-shadow var(--app-motion-base) var(--app-motion-ease),
        transform var(--app-motion-base) var(--app-motion-ease);
}
.app-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}
.app-btn:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 0.12rem 0.25rem rgba(45, 47, 52, 0.12);
}
.app-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(151, 79, 75, 0.28);
}
.app-btn:disabled,
.app-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}
.app-btn-primary {
    color: var(--app-neutral-0);
    background: linear-gradient(135deg, #6d222a 0%, var(--app-brand-primary) 100%);
    border-color: rgba(82, 13, 21, 0.88);
    box-shadow: 0 0.25rem 0.6rem rgba(82, 13, 21, 0.22);
}
.app-btn-primary:hover {
    color: var(--app-neutral-0);
    border-color: rgba(82, 13, 21, 0.95);
    box-shadow: 0 0.5rem 1.05rem rgba(82, 13, 21, 0.32);
}
.app-btn.app-btn-primary:hover,
.app-btn.app-btn-primary:focus,
.app-btn.app-btn-primary:active {
    color: var(--app-neutral-0);
}
.app-btn-secondary {
    color: var(--app-neutral-800);
    background-color: var(--app-neutral-100);
    border-color: rgba(79, 83, 92, 0.28);
}
.app-btn-secondary:hover {
    color: var(--app-neutral-900);
    background-color: var(--app-neutral-0);
    border-color: rgba(79, 83, 92, 0.42);
}
.app-btn-danger {
    color: var(--app-neutral-0);
    background-color: var(--app-danger);
    border-color: var(--app-danger);
}
.app-btn-danger:hover {
    color: var(--app-neutral-0);
    background-color: #681010;
    box-shadow: 0 0.45rem 0.95rem rgba(122, 16, 16, 0.28);
}
.app-btn.app-btn-danger:hover,
.app-btn.app-btn-danger:focus,
.app-btn.app-btn-danger:active {
    color: var(--app-neutral-0);
}
.app-btn-success {
    color: var(--app-neutral-0);
    background-color: var(--app-brand-green);
    border-color: var(--app-brand-green);
}
.app-btn-success:hover {
    color: var(--app-neutral-0);
    background-color: var(--app-success);
    box-shadow: 0 0.45rem 0.95rem rgba(47, 125, 50, 0.24);
}
.app-btn.app-btn-success:hover,
.app-btn.app-btn-success:focus,
.app-btn.app-btn-success:active {
    color: var(--app-neutral-0);
}
.app-btn-ghost {
    color: var(--app-brand-primary);
    background-color: var(--app-neutral-0);
    border-color: rgba(82, 13, 21, 0.32);
}
.app-btn-ghost:hover {
    color: var(--app-brand-primary);
    background-color: #f7eeee;
    border-color: rgba(82, 13, 21, 0.48);
}
.app-btn-sm {
    min-height: 1.875rem;
    padding: var(--app-space-1) var(--app-space-3);
    font-size: var(--app-font-size-sm);
}
.app-btn-icon {
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: var(--app-space-2);
    border-radius: var(--app-radius-lg);
}