:root {
    --ssa-color-primary: #111111;
    --ssa-color-primary-hover: #1f1f1f;
    --ssa-color-primary-active: #070707;
    --ssa-color-secondary: #f3f4f6;
    --ssa-color-secondary-hover: #e5e7eb;
    --ssa-color-secondary-active: #d1d5db;
    --ssa-color-danger: #dc2626;
    --ssa-color-danger-hover: #b91c1c;
    --ssa-color-danger-active: #991b1b;
    --ssa-color-ghost: rgba(26, 86, 219, 0.08);
    --ssa-color-ghost-hover: rgba(26, 86, 219, 0.16);
    --ssa-color-ghost-active: rgba(26, 86, 219, 0.24);
    --ssa-color-font-base: #0f172a;
    --ssa-color-font-inverse: #ffffff;
    --ssa-color-focus-ring: rgba(26, 86, 219, 0.35);
    --ssa-radius-sm: 9999px;
    --ssa-radius-lg: 9999px;
    --ssa-shadow-focus: 0 0 0 0.2rem var(--ssa-color-focus-ring);
    --ssa-shadow-elevated: 0 8px 16px rgba(15, 23, 42, 0.12);
    --ssa-gap-inline: 0.45rem;
    --ssa-transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    --ssa-font-weight: 500;
    --ssa-padding-sm-y: clamp(0.4rem, 0.38rem + 0.3vw, 0.48rem);
    --ssa-padding-sm-x: clamp(1.05rem, 0.98rem + 0.5vw, 1.2rem);
    --ssa-padding-md-y: clamp(0.58rem, 0.52rem + 0.4vw, 0.72rem);
    --ssa-padding-md-x: clamp(1.35rem, 1.25rem + 0.6vw, 1.65rem);
    --ssa-padding-lg-y: clamp(0.72rem, 0.67rem + 0.45vw, 0.88rem);
    --ssa-padding-lg-x: clamp(1.75rem, 1.6rem + 0.7vw, 2.1rem);
    --ssa-font-size-sm: 15px;
    --ssa-font-size-md: 15px;
    --ssa-font-size-lg: 15px;
    --ssa-line-height: 1.15;
}

.ssa-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ssa-gap-inline);
    font-weight: var(--ssa-font-weight);
    line-height: var(--ssa-line-height);
    border-radius: var(--ssa-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--ssa-transition);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    box-shadow: var(--ssa-shadow-elevated);
    transform: translateY(0) scale(1);
    transform-origin: center center;
    will-change: transform;
    position: relative;
    --ssa-press-scale-button: 0.982;
    --ssa-press-scale-text: 0.964;
}

.ssa-btn:focus {
    outline: none;
}

.ssa-btn:focus-visible {
    box-shadow: var(--ssa-shadow-focus);
}

.ssa-btn--primary {
    background-color: var(--ssa-color-primary);
    color: var(--ssa-color-font-inverse);
    border-color: var(--ssa-color-primary);
}

.ssa-btn--primary:hover:not(.is-disabled),
.ssa-btn--primary:focus-visible:not(.is-disabled) {
    background-color: var(--ssa-color-primary-hover);
    border-color: var(--ssa-color-primary-hover);
}

.ssa-btn--primary:active:not(.is-disabled) {
    background-color: var(--ssa-color-primary-active);
    border-color: var(--ssa-color-primary-active);
}

.ssa-btn--secondary {
    background-color: var(--ssa-color-secondary);
    color: var(--ssa-color-font-base);
    border-color: var(--ssa-color-secondary);
}

.ssa-btn--secondary:hover:not(.is-disabled),
.ssa-btn--secondary:focus-visible:not(.is-disabled) {
    background-color: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.08);
}

.ssa-btn--secondary:active:not(.is-disabled) {
    background-color: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.1);
}

.ssa-btn--danger {
    background-color: var(--ssa-color-danger);
    color: var(--ssa-color-font-inverse);
    border-color: var(--ssa-color-danger);
}

.ssa-btn--danger:hover:not(.is-disabled),
.ssa-btn--danger:focus-visible:not(.is-disabled) {
    background-color: #ef4444;
    border-color: #ef4444;
}

.ssa-btn--danger:active:not(.is-disabled) {
    background-color: #f87171;
    border-color: #f87171;
}

.ssa-btn--ghost {
    background-color: transparent;
    color: var(--ssa-color-primary);
    border-color: transparent;
}

.ssa-btn--ghost:hover:not(.is-disabled),
.ssa-btn--ghost:focus-visible:not(.is-disabled) {
    background-color: var(--ssa-color-ghost-hover);
    border-color: var(--ssa-color-ghost-hover);
}

.ssa-btn--ghost:active:not(.is-disabled) {
    background-color: var(--ssa-color-ghost-active);
    border-color: var(--ssa-color-ghost-active);
}

.ssa-btn--sm {
    font-size: var(--ssa-font-size-sm);
    padding: var(--ssa-padding-sm-y) var(--ssa-padding-sm-x);
}

.ssa-btn--md {
    font-size: var(--ssa-font-size-md);
    padding: var(--ssa-padding-md-y) var(--ssa-padding-md-x);
}

.ssa-btn--lg {
    font-size: var(--ssa-font-size-lg);
    padding: var(--ssa-padding-lg-y) var(--ssa-padding-lg-x);
    border-radius: var(--ssa-radius-lg);
}

.ssa-btn--block {
    width: 100%;
}

.ssa-btn.is-disabled,
.ssa-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
    box-shadow: none;
}

a.ssa-btn {
    text-decoration: none;
}

.ssa-btn:hover:not(.is-disabled),
.ssa-btn:focus-visible:not(.is-disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.ssa-btn--press-scale:active:not(.is-disabled) {
    transform: translateY(0) scale(var(--ssa-press-scale-button));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.ssa-btn.is-disabled:active,
.ssa-btn[disabled]:active {
    transform: none;
}

.ssa-btn__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: inherit;
}

.ssa-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: inherit;
    color: inherit;
}

.ssa-btn__icon span.iconify,
.ssa-btn__icon iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    transition: inherit;
    transform-origin: center center;
}

.ssa-btn__icon--sm .iconify,
.ssa-btn__icon--sm iconify-icon {
    font-size: 1.05em;
}

.ssa-btn__icon--md .iconify,
.ssa-btn__icon--md iconify-icon {
    font-size: 1.1em;
}

.ssa-btn__icon--lg .iconify,
.ssa-btn__icon--lg iconify-icon {
    font-size: 1.2em;
}

.ssa-btn__icon + .ssa-btn__label,
.ssa-btn__label + .ssa-btn__icon {
    margin-inline-start: 0.35em;
}

.ssa-btn i,
.ssa-btn svg {
    display: inline-block;
    font-size: 1em;
    line-height: inherit;
}

.ssa-btn:active:not(.is-disabled) .ssa-btn__label--press-scale,
.ssa-btn:active:not(.is-disabled) .ssa-btn__icon--press-scale,
.ssa-btn:active:not(.is-disabled) .ssa-btn__icon--press-scale span.iconify,
.ssa-btn:active:not(.is-disabled) .ssa-btn__icon--press-scale iconify-icon {
    transform: scale(var(--ssa-press-scale-text));
}