.btn{justify-content:center;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-3);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--fw-medium);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);white-space:nowrap;border:none;display:inline-flex}.btn:focus-visible{outline:var(--border-width-strong) solid var(--color-focus-ring);outline-offset:2px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--sm{height:32px;padding:0 var(--space-2);font-size:var(--text-sm)}.btn--md{height:40px;padding:0 var(--space-3)}.btn--lg{height:40px;padding:0 var(--space-4);font-size:var(--text-md)}.btn--icon{width:36px;height:36px;padding:0}.btn--primary{background:var(--color-action);color:var(--color-action-fg)}.btn--primary:not(:disabled):hover{background:var(--color-action-hover)}.btn--primary:not(:disabled):active{background:var(--color-action-active)}.btn--ghost{color:var(--color-text-muted);border:var(--border-width-default) solid var(--color-control-border);background:0 0}.btn--ghost:not(:disabled):hover{background:var(--color-bg-subtle);color:var(--color-text);border-color:var(--color-border-strong)}.btn--secondary{color:var(--color-text);border:var(--border-width-default) solid var(--color-control-border);background:0 0}.btn--secondary:not(:disabled):hover{background:var(--color-bg-subtle);border-color:var(--color-border-strong)}.btn--danger{background:color-mix(in srgb, var(--color-error) 72%, #000);color:var(--color-strong-fg)}.btn--danger:not(:disabled):hover{background:color-mix(in srgb, var(--color-error) 62%, #000)}.btn--warning{background:var(--color-warning);color:var(--color-strong-fg)}[data-theme=dark] .btn--warning{color:var(--color-text-inverse)}.btn--success{background:color-mix(in srgb, var(--color-success) 62%, #000);color:var(--color-strong-fg)}.btn--success:not(:disabled):hover{background:color-mix(in srgb, var(--color-success) 52%, #000)}.btn--info{background:color-mix(in srgb, var(--color-info) 70%, #000);color:var(--color-primary-fg)}.btn--info:not(:disabled):hover{background:color-mix(in srgb, var(--color-info) 60%, #000)}.btn__spinner{border:var(--border-width-strong) solid currentColor;width:14px;height:14px;animation:btn-spin var(--duration-spinner) linear infinite;border-top-color:#0000;border-radius:999px}@keyframes btn-spin{to{transform:rotate(360deg)}}