.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;transition:background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;display:inline-flex;position:relative;overflow:hidden}.btn:focus-visible{box-shadow:0 0 0 3px var(--color-bg-primary), 0 0 0 5px var(--color-accent);outline:none}.btn:active:not(:disabled){transition-duration:60ms;transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.btn--md{padding:var(--space-3) var(--space-6);font-size:var(--font-size-md)}.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg)}.btn--primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm), inset 0 1px 0 var(--color-card-highlight)}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-glow), inset 0 1px 0 var(--color-card-highlight);transform:translateY(-1px)}.btn--secondary{background:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-hover);box-shadow:var(--shadow-sm)}.btn--secondary:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn--outline{color:var(--color-text-primary);border:1px solid var(--color-border-hover);background:0 0}.btn--outline:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-muted);transform:translateY(-1px)}.btn--ghost{color:var(--color-text-secondary);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--color-bg-tertiary);color:var(--color-text-primary)}.btn--danger{background:var(--color-danger);color:#fff;box-shadow:var(--shadow-sm), inset 0 1px 0 var(--color-card-highlight)}.btn--danger:hover:not(:disabled){box-shadow:var(--shadow-md), inset 0 1px 0 var(--color-card-highlight);background:#dc2626;transform:translateY(-1px)}.btn--full{width:100%}.btn__spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}